你真的了解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,因为这涉及到继承计算的问题,用数值的话则会更为清晰明了。

本�文转载自:凹凸实验室

推荐阅读更多精彩内容

  • 请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 如果您觉得这篇文章还...
    MR_LIXP阅读 2,403评论 1 9
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 4,769评论 2 2
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,454评论 1 3
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 650评论 0 1
  • 一群基督徒要走远路,出发前,天使向他们显现,并告诉他们说,“每人都要背一把梯子,因为路上肯定有用得着的地方。”于是...
    海王星1984阅读 201评论 0 1
  • 二零一八年一月一日,零下十七度,日日盼君至
    沐雪mumu阅读 49评论 0 0
  • 产品种类认识的差不多了,现在开始慢慢接触电脑学做一些单子,从输发货单和物流单开始。这几天都是另外一个同事小帅带我,...
    红猪猪阅读 275评论 4 3
  • 我一生中会遇到许多的人 有些是我能选择的 有些是我无法选择的 可是 于我来讲 这些能选择的 无法选择的遇见都不重要...
    一只月小巴阅读 115评论 0 0