字体族
字体族使用font-family 属性声明的。适用于所有元素。
当我们想要对文档中的字体进行设置时,就可以通过font-family这个属性。通过这个属性,我们可以指定字体。比如:
p {
font-family:Georgia;
}
设置之后,用户代理会使用Georgia字体显示文档中所有的p元素。如果用户代理没有找到Georgia字体,那么就会忽略该字体使用默认字体。
因此,为了防止用户代理中无我们设置的字体类型从而使用默认样式,建议始终在font-family规则中指定通用字体族。这样相当于提供一种后备机制,在用户代理找不到匹配的字体时,选择一个字体代替。
p {
font-family: Arial, sans-serif;
}
我们可以设置多款字体,各个字体之间使用逗号间隔。对于逗号间隔的多个字体族,用户代理会按照所列的顺序查找字体。直到找到用户代理支持的或者是最后任意一款通用字体族中的字体。
如果一个字体名称中存在空格,如New York,或在字体名称中有符号,如#,$, 则在使用时要把该字体名称放在引号里。
p {
font-family: Wedgie, 'Karrank%' sans-serif;
}
如果没有引号,那么用户代理可能会忽略Karrank%字体。但是注意把带有引号的字体名称放在引号里不是强制要求,只是推荐做法。但是如果字体族的名称和font-family中的关键字同名,则必须要加引号
p {
font-family:Author, "cursive", cursive;
}
正如上面,名为"cursive"的字体,他的名字一定要加上引号,这样才能和关键字cursive区分开。
如果把通用字体族的名称,如serif 放在引号中,用户代理就会假设你设置的是一款字体的名称,而不是指通用字体族。
@font-face规则
CSS中支持我们使用自定义的字体,并通过@font-face这一规则实现。
@font-face是惰性加载字型的。这表明,仅当需要使用指定的字型渲染文本时,才会加载,否则不加载。
定义字体的全部参数都写在@font-face{ }结构中,这些参数称为描述符,其格式和平常的样式规则一样,为:descriptor: value;的形式。
有两个必须的参数:font-family和 src
-
此处的font-family和上面的就有些不同了,此处的是字体族描述符,上面的则是字体族属性。简单理解,此处的font-family用于定义自定义的字体的名称,上面的font-family则是用于引用,为文本应用字型。
-
src为定义的字型提供一个或多个源。对于有多个源,各个源之间使用逗号间隔。对于具有以逗号间隔的多个源来说,一旦用户代理无法从第一个源下载,就会尝试从下一个源进行下载。字型的源可以指向任何URI,不过有个限制:字型必须和样式表同源。因此,不能把src指向别人的网站,下载别人的字体。
- format() 如果想告诉用户代理所使用的字体是什么格式的,可以使用可选的format()
@font-family { font-family: "Switaa"; src:url("Switaa.otf") format("opentype"); }
这样做的好处是可以让用户代理跳过不支持的字体格式,加快加载速度。
format()还可以为不带有常规扩展名的字体文件指定格式,以防用户代理不识别。
@font-family { font-family: 'Switee'; src:url("Switee.otf") format('opentype'), url("Switee.true") format('truetype'); }
- local() 使用local()可以指定安装到用户设备中的字体族名称。(可以是多个)
@font-face { font-family:"Switee"; src:local("Switee"), local("SwiteeADF"); }
除了必选的font-family和src描述符外,还有几个可选的描述符。
描述符 | 默认值 | 说明 |
---|---|---|
font-weight | normal | 区分不同的字重 |
font-style | normal | 区分常规、斜体和倾斜字体 |
font-stretch | normal | 区分不同的字符宽度 |
font-variant | normal | 区分众多字型变体 |
font-feature-settings | normal | 直接访问OpenType的低层特性 |
unicode-range | U+0-10FFFF | 定义直接字体中可用的字符范围 |
字重 font-weight
取值:normal bold bolder lighter 100 200 300 400 500 600 700 800 900
一般来说,字重越大,字体越黑,越粗。
字重的工作方式:
字重分为九级。100是最细的,900是最粗的。
但是,CSS规范只是说,每个数字对应的权重至少和前面的数字具有相同的字重。因此,100、200、300、400可能对应于同样细的字体;500,600对应于同样粗的字体;700、800、900则对应同样较粗的字体。只要后面的数字关键字对应的粗细不必前面的数字关键字细就行。
400 对应normal , 700对应于bold.
如果给定字体族中字重的等级少于9级,用户代理会以以下方式填补空缺:
- 如果500未分配,与400对应的字重一样。
- 如果300未分配,则查找相较于400细的那个变体,如果没有,则字重和400一样。200和100也是这样处理的。
- 如果600未分配,将其对应于较500黑的那个变体。如果没有,则字重与500一样,700,800和900也是这样处理的。
字号font-size
字号的取值可以是绝对值、百分数、em、长度单位。
绝对值为:xx-small , x-small , small , medium , large , x-large , xx-large.
字形font-style
normal 、italic(斜体)、oblique(倾斜体)
自动调整字号font-size-adjust
有两个因素影响字体是否清晰:字号和x高度。
x高度除以字号得到的结果称为高宽比值。字号越大,宽高比值越小,字体越模糊;反之,字体越清晰。而font-size-adjust用于改变字体族间的宽高比值。
计算公式:
设定的font-size值 * (font-size-adjust值 / 字体的宽高比值 ) = 调整后的font-size