笔记:CSS3文本阴影换行字体等

CSS3文本

1.text-shadow
文本阴影
语法:text-shadow:h-shadow v-shadow blur color;
2.text-outline
文本轮廓
语法:text-outline:thickness blur color;
thickness:宽度值
暂时没有任何浏览器支持这个属性

CSS3换行

1.word-break
规定自动换行的处理方法
语法:word-break:normal / break-all / keep-all;
break-all:该换行的地方换行
keep-all:在半角符号、空格或连字符号的地方换行
2.word-wrap
允许长单词或URL地址换行到下一行
语法:word-wrap:normal / break-word;
break-word:单词断开换行
注:这个只针对拉丁文本有作用,中文、日文等不起作用

CSS3新文本属性

1.text-align-last
规定如何对齐文本的最后一行
语法:text-align-last:auto / left / right / center / justify / start / end / initial / inherit;
start:文本怎么对齐,最后一行就怎么对齐
end:文本怎么对齐,最后一行就反着对齐
initial:根据默认的来对齐
注:一、兼容方面IE支持,火狐要加前缀“-moz-”,谷歌要50+,
二、text-align-last 属性只有在“text-align”这个属性设置为 “justify” 时才起作用,谷歌浏览器除外。
2.text-overflow
规定当文本溢出包含元素时发生的事情
语法:text-overflow:clip / ellipsis / string;
clip:修剪下文本,边框到哪哪里就不显示了
ellipsis:多出来了还是会修剪,但是后面有三个点,表示后面还有文本放不下了
string:同样会修剪,但是提示符号可以自定义,这个属性值只有火狐可以兼容

CSS3字体

css3 @font-face 自定义的一种字体

语法规则:
@font-face{
font-family:< your web font name >; 字体名称
src:source [format]; 字体存放路径,可以多个,逗号隔开
font-weight:weight;
font-style:style; 最后两个属性可选填
}
your web font name:自定义的字体名称,它将被 web 元素的 font-family 所引用
source:字体的存放路径,可绝对或相对路径
format:自定义字体的格式,主要用来帮助浏览器识别
@font-face的字体格式

  1. TrueType(.ttf)格式
    .ttf格式是windows和Mac的最常见的字体,是一种RAW格式,因此它不为网站优化
  2. OpenType(.otf)格式
    .otf被认为是一种原始的字体格式,其内置在TrueType的基础上,所以也提供了更多的功能,IE不兼容
  3. Web Open Font Format(.woff)格式
    .woff字体是Web字体中最佳格式,它是一个开放的TrueType / OpenType的压缩版本,同时也支持元数据包的分离,不支持手机端
  4. Embedded Open Type(.eot)格式
    .eot字体是 IE 专用字体,可以从TrueType创建此格式字体
  5. SVG(.svg)格式
    .svg字体是基于SVG字体渲染的一种格式,IE和火狐不兼容
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值