前端应该知道的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 个常用的字体名称:  serifsans-serifmonospacecursive,和  fantasy。  这些都是非常通用的,当使用这些通用名称时,使用的字体完全取决于每个浏览器,而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况,浏览器会尽力提供一个看上去合适的字体。 serifsans-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之间(包括400500):

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

如果指定值小于400

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

如果指定值大于500

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

评论

这篇文章目前有 2 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Sidebar