html - font-weight 在没有加载字体的情况下是如何渲染的？

Question

我通常通过 @import url(https://fonts.googleapis.com/css?family=Roboto) 从 Google 下载字体，然后使用它们调整各种元素 (h1 , h2, ...)

h1 {
    font-weight: 500;
}
h2 {
    font-weight: bold;
}

在以下情况下如何计算字体渲染:

• 尚未通过 @import url(https://fonts.googleapis.com/css?family=Roboto:500) 加载正确的权重(在上述情况下为 500) ？它是从字体的基本版本外推(结果更好还是更差)？或者计算，在那种情况下预加载 500 只是有帮助(性能方面)但不会影响字体的视觉方面？
• bold 是用的吗？ bold 是特定数字权重的快捷方式吗？还是一种字体自己定义了 bold 在其情况下的含义(我猜这将是一个特定的数字权重？)

Answer 1

关于font-weight

The 'font-weight' property selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'.

• font-weight - W3.org

以上引用来自 W3.org 的推荐标准，意味着它是所有浏览器使用的标准。

---

未加载权重时的渲染

当找不到字体粗细时，浏览器将遵循一组规则来为它找到最接近的可用选项。

Once the font family's weights are mapped onto the CSS scale, missing weights are selected as follows:

• 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.
• If the desired weight is greater than 500, weights above desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.
• If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used.
• If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.

现在，它可能看起来像行话，但对于您的情况，您只需要阅读它的最后一点。

• If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.

所以最终，它会查找是否使用了基本字体，如果没有，它会找到比基本字体低的任何东西，然后如果仍然没有找到，它会尝试找到比它高的任何东西。

---

粗体时呈现

bold 的正常font-weight 是700。一旦你开始增加字体粗细，这就不会改变。如果您希望一段文本的字体粗细需要比普通文本更粗，则需要使用 bolder(或替代的 lighter)作为空格基本字体粗细和 bolder 之间必须始终更大，除非它处于极限。

bolder和lighter的具体含义见下表

Base - bolder - 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

最终，所有这些信息都可以在 W3.org 规范中找到。

• font-weight - Fonts | W3.org