关于 font-weight 的一些姿势

简介

font-weight 是css中用来指定文字粗细的属性。

font-weight 的取值

font-weight 的值有两种,一种是数值 100 到 900 之间的整百,还有一种是描述性的单词分别有 normalboldlighter 以及 bolder。其默认值是 normal

值得含义

  1. 数值 100 到 900 含义很明显就是对应着文字从细到粗的各个等级。
  2. normalbold 是两个定量指定文字粗细的值,其中 normal 等价于400,bold 等价于700。
  3. lighterbolder 这两个值稍微复杂一点,它们是一个相对的值,相对于父元素的字体粗细来计算当前字体的粗细,对应关系如下:
父元素值 bloder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

字体匹配算法

当css中指定的字重数值在字体重没有对应字重时,就需要 字体匹配算法(font-matching-algorithm) 来解决这个问题。算法大概意思就是: 如果指定的font-weight数值,在字体中有对应的字重,那么就匹配为该对应的字重,否则就按照一定的规则来处理
规则如下:

  1. 字重小于400,先找小于400的,如果没有,就找大的,匹配最邻近的。
  2. 字重大于500,先找大于500的,如果没有,就找小的,匹配最邻近的。
  3. 字重等于400,先匹配500,如果没有,按照第一个小于400规则执行。
  4. 字重等于500,先匹配400,如果没有,按照第一个小于400规则执行。

以防表述不准确,原文如下:

‘font-weight’ is matched next, so it will always reduce the matching set to a single font face. If bolder/lighter relative weights are used, the effective weight is calculated based on the inherited weight value, as described in the definition of the ‘font-weight’ property. Given the desired weight and the weights of faces in the matching set after the steps above, if the desired weight is available that face matches. Otherwise, a weight is chosen using the rules below:

  1. If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
  2. If the desired weight is greater than 500, weights above the desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.
  3. If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used.
  4. If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.

总结

并没有,只是项目中遇到了,所以查了些资料记录一下。