当字体粗细不可用时，浏览器会做什么？

Question

如果我加载带有 400 和 700 权重的 google 字体，但在我的 CSS 中我使用 font-weight:550; 浏览器会做什么？

Answer 1

根据MDN and W3.org：

If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:

• If a weight greater than 500 is given, the closest available darker weight is used (or, if there is none, the closest available lighter weight).
• If a weight less than 400 is given, the closest available lighter weight is used (or, if there is none, the closest available darker weight).
• If a weight of exactly 400 is given, then 500 is used. If 500 is not available, then the heuristic for font weights less than 500 is used.
• If a weight of exactly 500 is given, then 400 is used. If 400 is not available, then the heuristic for font weights less than 400 is used.

This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

另外：

There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, while others may have eight face weights. There is no guarantee on how a UA will map font faces within a family to weight values. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values.

Answer 2

对于 font-weight property, the value 550 is invalid. According to CSS error handling rules，具有无效值的声明将被忽略，即实际字体粗细由其他 CSS 规则确定（或退回到默认值），就好像声明是没有。