你真的了解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

根據W3C Fonts節章的規范標准，可知：

 

2.png

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

100～900、normal、bold

如果字體使用九階有序數值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)

為什么說大致對應呢？在有些字庫下是有差異的，比如在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所代表的字重並無關系。

其值通常是根據下表計算而得的：

 

form1.png

字體匹配算法

在上面我們已經提到，在很多情況下，字體並不是以九階數值來划分的，並且其含有的字重數量是不一的，通常情況下為4-6個。

此時，就會出現樣式指定的字重數值在字體中找不到直接對應的字重，那瀏覽器是如何解決的呢？

Bingo！

那就是要靠字體匹配算法來解決。其中關於font-weight部分是這么提及到的：

如果指定的font-weight數值，即所需的字重，能夠在字體中找到對應的字重，那么就匹配為該對應的字重。否則，使用下面的規則來查找所需的字重並渲染：

·    如果所需的字重小於400，則首先降序檢查小於所需字重的各個字重，如仍然沒有，則升序檢查大於所需字重的各字重，直到找到匹配的字重。

·    如果所需的字重大於500，則首先升序檢查大於所需字重的各字重，之后降序檢查小於所需字重的各字重，直到找到匹配的字重。

·    如果所需的字重是400，那么會優先匹配500對應的字重，如仍沒有，那么執行第一條所需字重小於400的規則。

·    如果所需的字重是500，則優先匹配400對應的字重，如仍沒有，那么執行第二條所需字重大於500的規則。

理解與運用

下面我們通過官方例子和實際測試來好好理解這個匹配算法規則。

官方例子

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，因為這涉及到繼承計算的問題，用數值的話則會更為清晰明了。

本�文轉載自：凹凸實驗室

作者：人不中二枉少年
鏈接： https://www.jianshu.com/p/f9c6f9729fbb
來源：簡書