Q：font-weight属性值的数值到底作何用？

在利用css进行样式控制的时候，font-weight属性作为核心属性之一，其使用率是非常高的，但是我们通常都只会用它的固定值，即normal/lighter/bold/bolder/inherit,而很少使用其中的100-900数值形式的属性值。那么这9个数值到底意味着什么呢？为什么从400起以下，效果都是呈现的normal级效果呢？而设置从600起以上又总是和bold的效果一样呢？

其实这9个数字代表了字体的九级粗细值。每一种字体在制作时都会定义其粗细体的格式，通常以Regular，Medium，Bold，heavy4个关键字来表示其font-weight由细到粗的程度。其中为Regular分配的值为400，Medium为500，Bold为700，heavy为800。这些关键字及其分配值决定了一个字体在显示的时候加粗到哪个级别。有些字体则更分得更细一些，比如包含Book（400），Black（900）这些关键字来更加精确的指向一个粗细值。

但大部分字体的粗细值关键字并没有精确到9个，甚至web字体可能只有normal和bold两种状态，这就无法与九级粗细值匹配了，那缺少的值又如何判别呢？

A：浏览器在解析过程中，对于这个问题，存在一个映射规则。

（PS：字体常规状态下的粗细值为400）

①缺少100,200,300中的任何一个值：映射更细的相邻值，若没有，则映射更粗的相邻值。直到有匹配值。

②缺少500：映射400（即默认值）。

③缺少600,700,800,900：映射更粗的相邻值，若没有，则映射更细的相邻值。直到有匹配值。

EXP：对于字体font1，它有300 400 600 700 800五种等级

 1 {
 2     font-weight: 100; 
 3     /*没有这个值，开始映射，由于没有比100更细的相邻值，所以检索更粗的相邻值200；发现也没有200，则检索300，完成映射匹配。*/
 4 }
 5 
 6 {
 7     font-weight: 500;
 8     /*对于500，若没有，直接映射到400，因此这时候映射到400。*/
 9 }
10 
11 {
12     font-weight: 900;
13     /*没有这个值，开始映射，由于没有比900更粗的相邻值，所以检索更细的相邻值，到800，完成映射匹配。
14 }

所以我们可以知道，对于这样一个字体，实际上它的九级粗细值补全为：

100(300)

200(300)

300

400

500(400)

600

700

800

900(800)

--------------------------------------------------------------------------------------------

怎么样，是不是感觉..............................................知道了也没啥用啊？

嘻嘻，其实这样的细节在帮助我们更全面的理解一个页面内容和更为精确的把握字体样式，能更好的将(zai)实(bie)现(ren)与(mian)浏(qian)览(shua)器(shuai)规(he)则(zhuang)相(x)结(xi)合(xi)，对于承载设备各种各样的前端来说，是很有意义的。

 

转载于:https://www.cnblogs.com/shockw4ver/p/5836315.html