前端应该知道的CSS字体知识

每个前端程序员一定都知道在 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 的倍数。下面是一些常见粗细值名称及其对应的数值

但是不同字体族/字体支持的字重不同，如果指定的权重值不可用，浏览器是如何解决的呢？没错，就是靠字重的回退机制去解决。

如果指定的权重值在  400和  500之间（包括400和500）：

• 按升序查找指定值与500之间的可用权重;
• 如果未找到匹配项，按降序查找小于指定值的可用权重；
• 如果未找到匹配项，按升序查找大于500的可用权重。

如果指定值小于400

• 按降序查找小于指定值的可用权重。如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。

如果指定值大于500，

• 按升序查找大于指定值的可用权重。如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。