CSS权威指南（五）字体

1.字体族

CSS定义了五种通用的字体族。

• 衬线字体：字形宽度各异，而且又衬线。因为字体不同字符的尺寸不同，因此宽度有差异。
• 无衬线字体：字体中的字形宽度各异，而且无衬线。
• 等宽字体：字形宽度一样。一般用于表示编程代码或者表格数据。这种字体各个字符在横向上所占的空间使用一样的。
• 草书字体：模仿人类笔迹或手写体。通常在笔划末端有较大的花饰，而且比衬线字体华丽。
• 奇幻字体：没有统一的特征。

   理论上，任何一款字体都可以归为一类字体族。浏览器通常会将不能识别字体族的字体归为奇幻字体族。

（1）使用字体族

   使用字体族需要使用font-family属性

2.@font-face

@font-face的作用主要是可以使用自定义的字体。

（1）必要的描述符

   @font-family有两个必要的描述符，分别是font-family和src，前者用于指定该自定义字体的名称，后者指定该字体的资源路径。

ps.这里的src适用于同源策略

（2）其他的字体描述符

（3）限制字符范围

   使用unicode-range可以指定自定义字体可以应用的字符范围。

3.字重（font-weight）

• 初始值：normal
• 可选值：norma、bold、bolder、lighter、100~900

   通常来说，字重越大，字体越粗、越黑。不同的数字字重值对应的字体的不同粗细，如果一个字体拥有全部的100_{900字形，那么100}900就都能和对应字体对应上。其中，通常400对应normal、700对应bold。如果500的字重未分配，那么和400一样。如果300未分配，将其对应于比400细的那个变体，如果没有，就和400一样。如果600未分配，将其对应于比500粗的那个变体，如果没有，和500保持一致。700~900同样也是这么分配的。

4.字号（font-size）

   指定字体大小。

5.字形（font-style）

• normal 常规
• italic 斜体
• oblique 倾斜体

6.字体拉伸（font-stretch）

   设置字体的瘦体和胖体。

7.字距（font-kerning）

   设置字体的字距。

8.字体变形（font-variant）

   设置字体连写、小号大写字母、小数的表示方式、数字之间的间距、零有没有管穿线等样式。

9.字体匹配机制

（1）用户代理创建或访问字体属性数据库

（2）用户代理把应用了字体属性的元素摘出来，构建显示元素所需的字体属性列表

（3）匹配字体时，先看font-stretch属性

（4）然后看font-style属性

（5）接下来匹配font-weight

（6）然后处理font-size

（7）如果第二步没有找到匹配的字体，用户代理在同一个字体族中找到替代字体，然后回到第二步

（8）假设找到一个基本匹配的字体，但是字体没有显示元素所需的全部信息，比如字体缺少版权符号，那么用户代理将回到第3步，搜索替代字体，再执行第二步

（9）最后，如果找不到匹配的字体，而且所有替代字体都试过了，用户代理将指定字体族中的默认字体，力争正确显示元素