font-weight设置了为什么没生效

W3C: CSS Fonts Module Level 3

一、定义

font-weight属性用来指定颜色的程度,线条的粗细,可以取的值:

100 to 900、normal、bold
100~900来划分其字重(字体的粗细度),与字体的字重则一一对应。并且normal等价于400,bold等价于700。

常见的字重数值大致对应的字重描述词语

  • 100 - Thin
  • 200 - Extra Light (Ultra Light)
  • 300 - Light
  • 400 - Normal
  • 500 - Medium
  • 600 - Semi Bold (Demi Bold)
  • 700 - Bold
  • 800 - Extra Bold (Ultra Bold)
  • 900 - Black (Heavy)

bolder

取继承值更重的字重

lighter

取继承值更轻的字重

二、字体匹配算法

选择字体的程度包括迭代由font-family属性所确定的字体家族、基于其他属性选择适当的字体外观以及确定指定字符对于的字形是否存在。

  1. 使用指定元素上字体属性计算后的值,用户代理从由‘font-family’属性所指定的字体列表中的第一个自己家族名开始。
  2. 如果家族名称没有被引号括起,且它是一个通用家族名称,则用户代理查找将要使用的恰当的字体家族名。用户代理可以基于包含元素的语言或字符的Unicode范围选择通用字体家族。
  3. 对于其他家族名称,用户代理尝试在@font-face规则中查找该家族名称,之后继续在可用系统字体中查找。名称匹配不区分大小写。在字体包含多种本地化字体家族名称的系统中,用户代理必须在匹配这些名称时独立于底层系统的语言或所使用的平台API。如果一个由@font-face规则定义的字体家族仅包含无效的字体数据,则它应当被认为是一个存在的但包含空的字符映射的字体;在此情况下,拥有相同名称的平台字体不能匹配。
  4. 如果一个字体家族成功匹配,用户代理组合包含字符的字形的家族中的字体外观集。之后逐步的根据下面给出的顺序使用其他字体属性匹配一个外观:
    1. 首先尝试‘font-stretch’。如果匹配集中包含宽度指匹配‘font-stretch’值的外观,则从匹配集中删除拥有其他宽度值的字形。如果没有精确匹配该宽度值的外观,则使用相近的宽度。如果‘font-stretch’为‘normal’或收缩比例值之一,则首先检查较窄的宽度值,之后检查较宽的宽度值。如果‘font-stretch’的值是扩大比例值之一,则首先检查较宽的宽度值,之后检查较窄的宽度值。一旦通过此过程确定了最近匹配的宽度,则从匹配集中删除其他宽度的外观。
    2. 之后尝试‘font-style’。如果‘font-style’的值是‘italic’,则首先检查斜体外观,之后检查倾斜,然后检查正常外观。如果值为‘oblique’,则首先检查倾斜外观,之后检查斜体外观,然后检查正常外观。如果值为‘normal’,则首先检查正常外观,之后检查倾斜外观,然后检查斜体外观。从匹配集中删除拥有其他样式值的外观。我们允许用户代理在平台字体家族中区分斜体和倾斜外观,但这不是必须的,用户代理可以将斜体或倾斜外观都视为斜体外观。但是,在由@font-face规则定义的字体家族中,斜体和倾斜外观必须使用‘font-style’描述符进行区分。
    3. 之后匹配‘font-weight’,它总能将匹配集缩小为一个字体外观。如果使用了更大/更小相对重量,则基于继承的重量值计算有效重量,相关信息在‘font-weight’属性的定义中描述。给定需要的重量和经过之前各步之后匹配集中外观的宽度,如果需要的重量可用,则匹配该外观。否则,使用下面的规则选择一个重量:
      • 如果需要的重量小于400,则首先降序检查小于所需重量的各重量,之后升序检查大于所需重量的各重量,直到找到匹配的重量。
      • 如果需要的重量大于500,则首先升序检查大于所需重量的各重量,之后降序检查小于所需重量的各重量,直到找到匹配的重量。
      • 如果所需的重量是400,则首先检查500,之后执行所需重量小于400的规则。
      • 如果所需的重量是500,则首先检查400,之后执行所需重量大于500的规则。
    4. font-size’必须在用户代理决定的容差边距中匹配。(典型的,可缩放字体被四舍五入到最近的整数像素,而点阵字体的容差可以到20%。)进一步的计算(如其他属性中的“em”值)是基于使用的‘font-size’值,而不是指定的值。
  5. 如果没有匹配的外观,或者匹配的外观不包含需要显示的字符的字形,则选择下一个家族名称,并重复前面两步。如果匹配的字体是使用@font-face规则定义的,则下载字体资源。如果匹配的字体是使用@font-face规则定义的且需要下载,则用户代理可以等待字体下载也可以先使用替代字体显示然后在字体下载之后再一次显示。
  6. 如果没有可考虑的字体家族,而且没有找到匹配的外观,则用户代理执行系统备用字体过程来查找用于显示的最佳匹配字符。这个过程的结果可能会因用户代理而不同。
  7. 如果个别字符不能使用任何字体显示,则用户代理应当使用某些方法表示该字体不能显示,可以显示一个表示缺少字形的符号(例如使用Last Resort Font)或者使用默认字体中的缺失字符字形。

ex:

根据以上规则,可以反推出字体组PingFang SC存在三种字重300、500、700

300 100、200、300

500 400、500

700 600、700、800、900

三、总结

1、通常情况下,一个特定的字体仅会包含少数的可用字重。若所指定的字重不存在直接匹配,则会通过字体匹配算法规则匹配使用邻近的可用字重这也就是为什么我们有时候使用特定字重时没有“生效”,看起来跟其它字重差不多的原因所在。

2、在实际中,最为常用的字重是normal和bold。我个人认为400、700是等效于normal、bold的,无论哪一种表示方法都没有关系,主要是个人习惯问题。

3、但是,推荐使用数值替代lighter、bolder,因为这涉及到继承计算的问题,用数值的话则会更为清晰明了。

  • 17
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值