为什么默认字体粗细是400？

Question

因此，在使用字体时：

• 默认（又名“常规”）字体粗细为400
• “粗体”字体粗细为700
• “light”字体粗细为300

但为什么 ？400什么？这是一种单位吗？这背后有历史原因吗？

Answer 1

不是“400 什么”，只是 400。根据 CSS 规范，首先在https://www.w3.org/TR/CSS1/#font-weight中正式化。字体粗细有九个级别，以无单位数字表示，从 100 开始到 900 结束，以 100 为增量。

除此之外，规范还定义了数值和字符串值之间的两种映射：

• 数值 400 和字符串值normal是相同的，并且
• 数值 700 和字符串值bold是同一件事

值得注意的是，这是仅有的两个官方数字/字符串映射。官方没有其他映射， https://drafts.c​​sswg.org/css-fonts-3/#font-weight-prop中的数值表纯粹是为了说明哪些真实CSS 值映射到哪些粗略名称人们倾向于使用它们。

（另请注意，虽然 CSS4 的数字工作方式允许您以 1 为增量使用数字 1-1000，但它仍然只能正式识别字符串值normal和bold，仍然分别映射到 400 和 700。请参阅https:// /drafts.c​​sswg.org/css-fonts-4/#font-weight-prop了解更多信息）

因此，围绕这些权重的唯一正式规则是，如果您在 CSS 上下文中使用字体系列，则400/的字体粗细normal可能会为您提供该字体系列的字体，而/Regular的字体粗细可能将为您提供该字体的任何字体。字体系列的字体。其他一切都完全未定义，您只知道 100、200 和 300 可能比400 更轻，500 和 600 可能介于常规和粗体之间，800 和 900 可能比700 重。700boldBold

所有这些都被限定为“可能”，因为这@font-face使得所有关于这件事的事情都变得完全无效。如果你使用@font-face，你就完全推翻了CSS关于这些数值含义的规则。例如：当您将 font-weight 设置为 900 时，此规则将产生超细字体，因为这是我们告诉浏览器必须执行的操作：

@font-face {
  font-family: MyFont;
  font-weight: 900;
  src: url("./fonts/ultra-thin.woff2") format("WOFF2");
}

最重要的部分是CSS如何使用字体粗细数字仅适用于CSS。它实际上与存储在实际字体文件中的字体粗细无关，或者正如您在文字处理软件等中看到的那样。