CSS中应该遵循哪个字体加粗方式：font-weight:700还是font-weight:bold？

Question

我看到一些网站在CSS中提到了font-weight:700或font-weight:bold。但两者的效果是相同的。哪一个才是正确的，我们应该如何遵循？请给我建议。

- Pavan Kumar

---

如果您想要加粗文本，则应使用 font-weight:bold;。 - khurram

一般来说，如果字体具有适合其中一个数字权重的字形，则浏览器应显示该字形。早些年的浏览器（如Safari和IE）并没有遵循这个规则，而是显示了伪粗体的普通字形，而不是适当的“font-weight: 600”字形。详见http://destination-code.blogspot.com/2009/01/font-weight-number-keywords-100-900.html。 - Volker E.

从语义的角度来看，我更喜欢使用单词而不是数字。例如，使用“thin”代替“300”，或者使用“bold”代替“700”更容易阅读。当然，这只是个人偏好。 - Connor Gurney

Answer 1

您可以在CSS字体模块3级规范中找到所有有效的font-weight值的完整列表。在第3.2节(font-weight属性)下，我们找到以下列表：

• 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)

您可能注意到700是"加粗"，所以无论如何都会得到相同的结果。(唯一对应数字的是"normal" - 400。）

完整列表包括：

normal - 同‘400’
bold - 同‘700’
bolder - 指定比继承值更粗的重量
lighter - 指定比继承值更轻的重量

实际上没有什么区别，更多取决于您和您的团队习惯使用哪个。

- Sampson

---

Firefox不支持这个。其他的我不清楚。 - NH.

这可能取决于您的系统安装了哪些字体以及可用的字重/样式。如果您在 CSS 中声明具有不同字重和样式（并且相同字体名称）的字体，FF 似乎可以理解并按预期应用，但有时它会与其他浏览器不同地应用 faux-bold 和 faux-italic。 - Roy Tinker

实际上，所引用的列表本身并不是正确的来源，因为它在该列表正上方说了以下内容：“这些[整数值]大致对应于下面常用的字重名称”。但是，在该整数值列表正下方的部分中，正如您引用的那样，它说“normal-与‘400’相同”和“bold-与‘700’相同”。 - caw

Answer 2

使用数字表示的font-weight比默认的粗体更好，因为您可以根据设计要求调整粗体程度。

请查看此链接

- sandeep

---

它在所有主要浏览器中都能正常工作吗，关于值的调整呢？ - Pavan Kumar

不行。至少火狐浏览器不支持除400和700以外的加粗字体。 - NH.

在Chrome中，对我来说700以下的字体都不起作用。700以上的所有字体都与“font-weight:bold”相同。如果在您的浏览器/大多数浏览器中也是这种情况，那么您应该使用“font-weight:bold”，对吧？ - Cannicide

@IamGues 当没有提供比“bold”（即“700”）更重的weight字体时，就会发生这种情况。浏览器只是“四舍五入”到最接近定义的字体 - 如果您告诉浏览器font-weight: 900，但它在权重900（也不是800）中找不到该字体，但在700中找到了，则显示700。 - Robert Kusznier

啊，这样就更有意义了。谢谢@RobertKusznier - Cannicide

Answer 3

我的基本答案与其他两次给出的相同，但是带有正确的参考资料: 根据CSS 2.1规范（第15.6条），它们在定义上是同义词。这是权威的规范。 "normal"关键字与“400”同义，而“bold”与“700”同义。单词“bold”比数字“700”更易读，因为后者没有直观的意义。在您使用数字指定字体重量以获得没有关键字的字体重量时，数字可能更适合可读性。这种情况很少见，部分原因是大多数字体不支持除“400”和“700”之外的字体重量。

- Jukka K. Korpela

---

那么哪个更好？去哪一个比较好？ - Pavan Kumar

你问哪一个是正确的。答案是两个都正确，意思相同。你还问该使用哪一个，技术上的正确答案是：无论哪个你更喜欢用就可以了。我提供了一些在决定偏好时需要考虑的事情。 - Jukka K. Korpela

Answer 4

功能上它们是相等的，但从样式上来说，我建议选择其中一种方法并保持一致：要么只使用关键字，要么只使用数字标识符。这使得CSS代码更容易理解。

由于字体的权重范围比仅限于“常规”和“粗体”要广泛得多，例如“超轻”，“轻”，“书”，“中等”，“半粗体”，“黑体”，“超黑体”，在使用自定义字体时通常不可能不使用数字标识符。在这些情况下，我认为最好完全避免使用“常规”和“粗体”，而改用“400”和“700”。这更加一致，并简化了对CSS的理解-即使是经验不足的开发人员也可以轻松掌握“400”比“500”更薄，但他可能不知道当他需要比较“常规”和“500”时哪一个更薄。

在只使用 regular 和 bold 权重的情况下，使用关键字而不是数字标识符更加合理和易读。但在我的工作中，这种情况几乎不会发生。

- Robert Kusznier

Answer 5

在Windows上的某些浏览器（IE，FF）中，使用font-weight:800与各种UTF-8字体不兼容。请使用font-weight:bold或font-weight:bolder。

我在制作BBC Kyrgyz的东西时发现了这一点。

- scottj