font-weight基本信息

font-weight可取值：100～900和normal、bold、bolder、lighter。

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100、200、300、400、500、600、700、800、900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

语法

<font-weight-absolute> | bolder | lighter
where 
<font-weight-absolute> = normal | bold | [1,1000]>

如果字体使用九阶有序数值100～900来划分其字重(字体的粗细度)，那么样式指定的font-weight属性值与字体的字重则一一对应。并且normal等价于400，bold等价于700。

但实际上，我们一般遇到的字体很多时候都是使用一些通用的词描述划分其字重，如下所示。

常见的字重数值大致对应的字重描述词语：

· 100 - Thin · 200 - Extra Light (Ultra Light) · 300 - Light · 400 - Regular (Normal、Book、Roman) · 500 - Medium · 600 - Semi Bold (Demi Bold) · 700 - Bold · 800 - Extra Bold (Ultra Bold) · 900 - Black (Heavy)

font-weight的转化规律

font-weight 数值采取离散式定义（使用 100 的整倍数）。数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200 。

为什么说大致对应呢？在有些字库下是有差异的，比如在Adobe Typekit字库中对字重描述的划分列表中，它列出Heavy指的是800而不是900。另外，在我们日常使用的Photoshop和Sketch里面，Ultra Light是100，而Thin是200。

并且，字体所拥有的字重的数量实际上很少存在满足有9个字重刚好跟100～900的CSS字重一一对应的情况，通常字体拥有的字重数量为4至6个。

不必担心，起码400和700对应的字重至少是每种字体必备的，譬如常见的 Arial、Helvetica、Georgia等等，只有400(normal)和700(bold)。

bolder、lighter
bolder、lighter表示其字重值是基于从其父元素继承而来的字重计算所得的，与normal、bold所代表的字重并无关系。

字体匹配算法

在上面我们已经提到，在很多情况下，字体并不是以九阶数值来划分的，并且其含有的字重数量是不一的，通常情况下为4-6个。

此时，就会出现样式指定的字重数值在字体中找不到直接对应的字重，那浏览器是如何解决的呢？

Bingo！

那就是要靠字体匹配算法来解决。其中关于font-weight部分是这么提及到的：

如果指定的font-weight数值，即所需的字重，能够在字体中找到对应的字重，那么就匹配为该对应的字重。否则，使用下面的规则来查找所需的字重并渲染：

• 如果所需的字重小于400，则首先降序检查小于所需字重的各个字重，如仍然没有，则升序检查大于所需字重的各字重，直到找到匹配的字重。

• 如果所需的字重大于500，则首先升序检查大于所需字重的各字重，之后降序检查小于所需字重的各字重，直到找到匹配的字重。

• 如果所需的字重是400，那么会优先匹配500对应的字重，如仍没有，那么执行第一条所需字重小于400的规则。

• 如果所需的字重是500，则优先匹配400对应的字重，如仍没有，那么执行第二条所需字重大于500的规则。

总的来说如下：
如果某个给定的字体系列少于九个字体粗细基本，则用户代理需要做更多工作。这种情况，使用一种预先定义的方式来填充缺失的空隙。

填补缺失的方法：

可参考font-weight。

500缺失：和400相同。

600|700|800|900任一值缺失：和下一级较粗的值相同。如果没有，则和下一级较细的值相同。

例如：如果一个字体中缺失“500”和“900”，那么该字体的9级粗细值就应该相当于“100、200、300、400、400、600、700、800、800”。

300|200|100中任一值缺失：和下一级较细的值相同。如果没有，则和下一级较粗的值相同。

这里需要注意的是，填空值500表现的是300的字重，而不是600的字重。

为什么呢？根据结果表现，我们可以反推出，字重在浏览器去渲染时早已经按照算法去一一匹配好。也就是，400匹配的字重在500匹配之前已经匹配好了（说起来有点拗口，大家可以根据Figure.16的例子体会下）。

总结

根据以上的研究，可以总结出三点:

1、通常情况下，一个特定的字体仅会包含少数的可用字重。若所指定的字重不存在直接匹配，则会通过字体匹配算法规则匹配使用邻近的可用字重。这也就是为什么我们有时候使用特定字重时没有“生效”，看起来跟其它字重差不多的原因所在。

2、在实际中，最为常用的字重是normal和bold。我个人认为400、700是等效于normal、bold的，无论哪一种表示方法都没有关系，主要是个人习惯问题。

3、但是，推荐使用数值替代lighter、bolder，因为这涉及到继承计算的问题，用数值的话则会更为清晰明了。

• 参考文章 (opens new window)