font-family:这是文本字体。
- 使用“,”分隔的字体族名称,如
font-family: Arial, Helvetica, sans-serif
- 初始值由浏览器设置决定,可以继承
字体匹配算法:
- 浏览器先获取一个系统字体列表
- 对元素的每一个字符,使用
font-family
属性及其他属性进行匹配,如果能匹配就暂定该字体 - 如果步骤2没有匹配上,选择下一个可选的
font-family
执行步骤2 - 如果匹配到一个字体,但是字体中没有该字符,继续对下一个可选的
font-family
执行步骤2 - 如果没有匹配到字体,使用浏览器默认字体
font-family
使用:
- 英文字体放在中文字体前面
- 最后总是添加通用字体族
font-size: 文本大小,可以使用px,百分比等作为单位。
font-style
- 定义文字也斜体还是正常方式显示
- 取值:
normal
(正常)|italic
(倾斜)|oblique
(伪斜体) - 初始值为
normal
,可以继承
font-weight
- 定义文字的粗细程度
- 取值:
normal
|bold
|bolder
|lighter
|100
|200
| ... |900
- 初始值为
normal
,可以继承 - 一般使用
normal
和bold
line-height
- 元素所属的line box的高度,即文本所在行的高度
- 始值为
normal
(具体指由浏览器决定),可以继承 - 取值:<长度> | <数字> | <百分比>
- 段落文字一般取值 1.4 ~ 1.8
Web Fonts
使用网络上或者本地自定义的字体。使用方法如下:
@font-face {
font-family: 'fontname';
src: url('../fonts/webfont.eot');
src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/webfont.woff') format('woff'),
url('../fonts/webfont.ttf') format('truetype'),
url('../fonts/webfont.svg#NeuesBauenDemo') format('svg');
font-weight: normal;
font-style: normal;
}
div {
font-family: 'fontname'
}
text-align
- 定义文本在容器内的对齐方式
- 取值:
left
,right
,center
,justify
letter-spacing
- 指定字符之间的间距
- 取值:
normal
,<length>
word-spacing
- 指定单词之间的间距
- 取值:
normal
,<length>
text-indent
- 指定文本缩进
- 取值:
normal
,<length>
,<percentage>
- 默认不缩进
text-decoration
- 定义了文本的装饰效果,如下划线,删除线等
- 初始值为
none
,可以继承 - 取值:
underline
(下划线),line-through
(中划线),overline
(上划线)
white-space
- 指定空白符如何处理
- 取值:
normal
,nowrap
,pre