css 字重匹配规则

在引入字体包时，如果我们只引入了部分字重，比如下面例子，只引入了字体的 400、500、700、900 字重。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">

当为元素设置为 font-weight: 400，会直接命中字重为400，在页面上显示时，也会显示400的效果。 那为元素设置为字重 200、300、600以及其他没有引入的字重的值，会发生什么呢？

CSS Fonts Module Level 4 在规范中定义了字重缺失的匹配规则： https://www.w3.org/TR/css-fonts-4/#missing-weights

我来总结一下字重缺失时的匹配规则：

1. 基本原则：

• 优先寻找完全匹配的字重
• 没有完全匹配时，根据以下规则选择最接近的字重

2. 对于小于等于 500 的字重：

• 优先选择比目标字重小的最接近字重
• 如果没有更小的字重，则选择最小的可用字重
• 例如：设置 500，有 400 和 600 → 选择 400

3. 对于大于 500 的字重：

• 优先选择比目标字重大的最接近字重
• 如果没有更大的字重，则选择最大的可用字重
• 例如：设置 600，有 400 和 700 → 选择 700

4. 具体示例：

/* 只有 400 700 900 三个字重可用时 */
font-weight: 100  → 使用 400
font-weight: 300  → 使用 400
font-weight: 500  → 使用 400
font-weight: 600  → 使用 700
font-weight: 800  → 使用 900 // 没有900字重，则会命中700
font-weight: 900  → 使用 900 // 没有900字重，则会命中700

这个规则保证了在字重缺失时，能够有一个一致的、可预期的降级表现。在字重缺失时，浏览器不会发起新的字体文件请求，也不会报错或警告。