font-family
- 使用逗号分隔的字体族名称
- 初始值由浏览器设置决定，可继承
- 英文字体总是放在中文字体前面
- 最后总是添加通用字体族
body {
font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}
.receipt {
font-family: Courier, "Lucida Console", monospace;
}
浏览器如何渲染字体——字体匹配算法：
1.浏览器先获取一个系统字体列表
2.对于元素中的每一个字符，使用font-family属性及其他属性进行匹配，如果能匹配就暂定该字体
3.如果步骤2没有匹配上，选择下一个可选的font-family进行步骤2
4.如果匹配到一个字体，但是字体中没有该字符，继续对下一个可选的font-family执行步骤2
5.如果没有匹配到该字体，使用浏览器默认字体
font-size
- 定义文字的大小，可以使用px，百分比，em等做单位
- 取值
- 绝对值 xx-small | x-small | small | medium | large | x-large| xx-large
- 相对值 large | smaller -> 相对于父级计算
- 长度
- 百分数，相对于父级元素计算
- 初始值为medium(由浏览器设置决定，一般为16px)，可继承
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.6em; /* 1.6em = 16px */
}
长度单位em
- 一般是相对于元素font-size的计算值
- 用在font-size属性上时，是相对于父元素的font-size计算值
font-style
- 定义文字以斜体还是正常方式显示
- 取值：normal | italic | oblique (伪斜体)
- 初始值为normal，可继承
font-weight
- 定义文字的粗细程度
- 取值：normal | bold | bolder | lighter | 100 | 200 | ... | 900
- 初始值为normal
line-height
- 元素所属的line-box 所占高度
- 初始值为normal(具体由浏览器决定)，可继承
- 取值：<长度> | <数字> | <百分比>
- 段落文字一般取值 1.4~1.8
字体样式不仅可以单独写，还可以写在一起
font缩写
p { font: bold 12px/14px sans-serif }
Web Fonts
@font-face {
[ font-family: <family-name>; ] ||
[ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
[ unicode-range: <urange>#; ] ||
[ font-variant: <font-variant>; ] ||
[ font-feature-settings: normal | <feature-tag-value>#; ] ||
[ font-variation-settings: normal | [ <string> <number>] # ||
[ font-stretch: <font-stretch>; ] ||
[ font-weight: <weight>; ] ||
[ font-style: <style>; ]
}
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
一些字体来源
text-align
- 定义文本在容器内的对齐方式
- 取值 ： left | right | center | justify
- 初始值由HTML的dir属性决定，可继承
letter-spacing
- 指定字符之间的间距
- 取值： normal | <length>
- 初始值为normal,可继承
word-spacing
- 指定单词之间的间距
- 取值： normal | <length>
- 初始值为normal,可继承
text-indent
- 指定文本缩进
- 取值： normal | <length> | <precentage>
- 初始值为0，可继承
text-decoration
- 定义了文本的一些装饰效果,比如下划，删除线等
- 初始值为none，可继承
- 其他值： underline | line-through | overline
white-space
- 指定空白符如何处理
- 取值：normal | nowrap | pre
word-break
- 指定是否允许在单词中间换行
- 取值： normal | break-all | break-word
网友评论