我看过一些网站,其中提到了 CSS -font-weight: 700
或font-weight: bold
. 但是两个结果是一样的。哪一个是正确的,我们应该如何遵循?请给我建议。
5 回答
font-weight
您可以在CSS Fonts Module Level 3 Specification中找到所有有效值的完整细分。在第 3.2 节(字体权重属性)下,我们找到以下列表:
- 100 - 薄
- 200 - 超轻(超轻)
- 300 - 光
- 400 - 正常
- 500 - 中等
- 600 - 半粗体(半粗体)
- 700 - 粗体
- 800 - 超粗体(超粗体)
- 900 - 黑色(重)
您可能注意到这700
是“粗体”。所以无论哪种方式,你都会得到相同的结果。(唯一对应于数字的另一个是“正常” - 400
。)
完整列表是:
normal
- 与“400”相同<br>
bold
- 与“700”相同<br>
bolder
- 指定比继承值更粗的粗细
lighter
- 指定比继承值更轻的粗细
没有真正的区别。更多的是关于你和你的团队习惯的东西。
font-weight
数字比默认粗体更好,因为在数字中您可以根据设计要求 调整粗体。
我的基本答案与已经给出两次的答案相同,但参考正确:
根据 CSS 2.1 规范第 15.6 条,它们在定义上是同义词。这是权威规范。
关键字“normal”与“400”同义,“bold”与“700”同义。
单词bold
使代码比数字更具可读性700
,没有直观意义。在您使用数字指定字体粗细的情况下,该数字可能更适合可读性,以获取没有关键字的粗细。400
这种情况很少见,部分原因700
是大多数字体不支持其他字体粗细。
在功能上它们是相等的,但在风格上我会说选择其中一种方法并与之保持一致:要么只使用关键字,要么只使用数字标识符。这使得 CSS 代码更容易理解。
由于字体的权重范围远不止regular
和bold
,例如extra light、light、book、medium、semibold、black、extra black,因此在使用自定义字体时,通常不可能不使用数字标识符。在这些情况下,我认为最好避免使用regular
and ,而是bold
使用400
and 700
。这更加一致并且简化了对 CSS 的理解——即使是没有经验的开发人员也可以很容易地掌握哪个400
更薄500
,但是当他需要比较regular
和时,他可能不知道哪个更薄500
。
在您使用的唯一权重是regular
and的情况下,bold
使用关键字而不是数字标识符是完全合理且更具可读性的。但在我的工作中,这种情况几乎不会发生。
在 Windows 上的某些浏览器(IE、FF)中,doingfont-weight:800
不适用于各种 UTF-8 字体。使用font-weight: bold
或font-weight: bolder
..
我在为 BBC Kyrgyz 制作东西时发现了这一点。