共计 1313 个字符，预计需要花费 4 分钟才能阅读完成。
每个前端程序员一定都知道在 Web 开发中怎么设置页面中的字体，但是通过 CSS 属性 font-family 设置了字体是不是就一定根据你设置的显示？那么这里就要了解几个必要的知识点：
什么是字体 fallback 机制
在 CSS 中，可以通过 font-family 指定不同的字体，并且可以给定一个先后顺序，由字体名或者字体族名组成。当指定的的字体找不到的时候，浏览器会按照 font-family 属性指定的先后顺序寻找支持的字体。比如：
html {font-family: 'PingFang SC', sans-serif;}
在上面的 CSS 代码中，指定 PingFang SC 的字体族和通用字体 sans-serif，在支持平方字体族的 Mac/IOS 平台上用平方的字体，在不支持的平方字体的 Android 等平台上，会命中sans-serif，如果sans-serif 也不支持，就会默认用浏览器的默认字体代替。
什么是安全字体
说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。—MDN
CSS 定义了 5 个常用的字体名称:
serif,sans-serif,monospace,cursive, 和fantasy。这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。serif,sans-serif和monospace是比较好预测的，默认的情况应该比较合理，另一方面，cursive和fantasy是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。—MDN
什么是字重 / 字重的回退机制
在 CSS 中，可以通过 font-weight 属性指定了字体的粗细程度。其属性值既可以用 normal，bold 等粗细值名称表示，也可以用介于 1-1000 之间的数值表示，同时数值采取离散式表示，非 100 的整数倍的数值将被四舍五入转换为 100 的倍数。下面是一些常见粗细值名称及其对应的数值
| 数值 | 粗细值名称 |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | SemiBold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
但是不同字体族 / 字体支持的字重不同，如果指定的权重值不可用，浏览器是如何解决的呢？没错，就是靠字重的回退机制去解决。
如果指定的权重值在
400和500之间（包括400和500）：
按升序查找指定值与 500之间的可用权重;如果未找到匹配项，按 降序 查找小于指定值的可用权重； 如果未找到匹配项，按 升序 查找大于 500的可用权重。如果指定值小于
400
按 降序 查找小于指定值的可用权重。如果未找到匹配项，按 升序 查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。 如果指定值大于
500，
按 升序 查找大于指定值的可用权重。如果未找到匹配项，按 降序 查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。
