你真的了解font-weight吗？
1.png
font-weight我们很多⼈都⽤过，甚⾄经常⽤，但你们真的了解font-weight吗？今天我带⼤家深⼊了解⼀
下font-weight
问题提出
font-weight的属性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder，它们的区别是？
认识font-weight
2.png
font-weight可取值：100～900和normal、bold、bolder、lighter。
100～900、normal、bold
如果字体使⽤九阶有序数值100～900来划分其字重(字体的粗细度)，那么样式指定的font-weight属性值与字体的字重则⼀⼀对应。并且normal 等价于400，bold等价于700。
但实际上，我们⼀般遇到的字体很多时候都是使⽤⼀些通⽤的词描述划分其字重，如下所⽰。
常见的字重数值⼤致对应的字重描述词语：
·    100 - Thin
100 - Thin
·
200 - Extra Light (Ultra Light)
·    200 - Extra Light (Ultra Light)
·
300 - Light
·    300 - Light
·
·    400 - Regular (Normal、Book、Roman)
400 - Regular (Normal、Book、Roman)
·
500 - Medium
·    500 - Medium
·
600 - Semi Bold (Demi Bold)
·
    600 - Semi Bold (Demi Bold)
·
·    700 - Bold
700 - Bold
·
800 - Extra Bold (Ultra Bold)
·    800 - Extra Bold (Ultra Bold)
·
900 - Black (Heavy)
·    900 - Black (Heavy)
·
并且，字体所拥有的字重的数量实际上很少存在满⾜有9个字重刚好跟100～900的CSS字重⼀⼀对应的情况，通常字体拥有的字重数量为4⾄6个。
不必担⼼，起码400和700对应的字重⾄少是每种字体必备的，譬如常见的 Arial、Helvetica、Georgia等等，只有400(normal)和700(bold)。bolder、lighter
bolder、lighter表⽰其字重值是基于从其⽗元素继承⽽来的字重计算所得的，与normal、bold所代表的字重并⽆关系。
其值通常是根据下表计算⽽得的：
form1.png
字体匹配算法
在上⾯我们已经提到，在很多情况下，字体并不是以九阶数值来划分的，并且其含有的字重数量是不⼀的，通常情况下为4-6个。
此时，就会出现样式指定的字重数值在字体中不到直接对应的字重，那浏览器是如何解决的呢？
Bingo！
如果指定的font-weight数值，即所需的字重，能够在字体中到对应的字重，那么就匹配为该对应的字重。否则，使⽤下⾯的规则来查所需的字重并渲染：
·    如果所需的字重⼩于400，则⾸先降序检查⼩于所需字重的各个字重，如仍然没有，则升序检查⼤于所需字重的各字重，直到到匹配的字重。
·    如果所需的字重⼤于500，则⾸先升序检查⼤于所需字重的各字重，之后降序检查⼩于所需字重的各字重，直到到匹配的字重。
·
    如果所需的字重是400，那么会优先匹配500对应的字重，如仍没有，那么执⾏第⼀条所需字重⼩于400的规则。
·    如果所需的字重是500，则优先匹配400对应的字重，如仍没有，那么执⾏第⼆条所需字重⼤于500的规则。
fontweight取值理解与运⽤
下⾯我们通过官⽅例⼦和实际测试来好好理解这个匹配算法规则。
官⽅例⼦
W3C规范标准中给出这么⼀个例⼦：
font2.jpg
注解：灰⾊标记的是字体中缺少的字重，⽽⿊⾊则是字体拥有的字重。
基于匹配算法规则，看图理解所得：
Figure 15.图指的是
form2.png
拿font-weight: 300；来说，字体中没有可以直接匹配的字重，那么300⼩于400，则根据第⼀条规则，先降序查匹配，但是都没有可匹配的200、100，那么升序查为400，结果可匹配。
Figure 16.图指的是
form3.png
这⾥需要注意的是，填空值500表现的是300的字重，⽽不是600的字重。
为什么呢？根据结果表现，我们可以反推出，字重在浏览器去渲染时早已经按照算法去⼀⼀匹配好。也就是，400匹配的字重在500匹配之前已经匹配好了（说起来有点拗⼝，⼤家可以根据Figure.16的例⼦体会下）。
其余的，我就不多解释了，⼤家可以根据结果检查⾃⼰是否理解到位。
总结
根据以上的研究，可以总结出三点:
1、通常情况下，⼀个特定的字体仅会包含少数的可⽤字重。若所指定的字重不存在直接匹配，则会通过字体匹配算法规则匹配使⽤邻近的可⽤字
。这也就是为什么我们有时候使⽤特定字重时没有“⽣效”，看起来跟其它字重差不多的原因所在。
重。
2、在实际中，最为常⽤的字重是normal和bold。我个⼈认为400、700是等效于normal、bold的，⽆论哪⼀种表⽰⽅法都没有关系，主要是个⼈习惯问题。
3、但是，推荐使⽤数值替代lighter、bolder，因为这涉及到继承计算的问题，⽤数值的话则会更为清晰明了。
本�⽂转载⾃：凹凸实验室

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。