如何正确使用CSS font-weight设置字重？

Question

**如何正确使用CSS font-weight设置字重？** 在使用CSS设置字体粗细时，很多开发者对`font-weight`属性的理解存在误区。`font-weight`不仅支持`normal`和`bold`关键字，还支持100到900之间的数字值，代表不同的字重层级。然而，字体是否能正确显示对应字重，取决于所使用字体本身是否包含该字重的字形。如果字体不支持某个字重值，浏览器会自动寻找最接近的可用字重，可能导致显示效果不符合预期。此外，不同操作系统和浏览器对字重的渲染也略有差异。因此，正确使用`font-weight`不仅需要理解其语法，还需结合字体特性进行合理选择。

Answer 1

如何正确使用CSS font-weight设置字重？

1. 理解 font-weight 的基本语法

font-weight 属性用于设置字体的粗细程度。它支持关键字和数字值：

• normal：等价于 400
• bold：等价于 700
• 数字值：从 100（最细）到 900（最粗），每 100 为一个层级

例如：

body {
    font-weight: 400;
}

strong {
    font-weight: 700;
}

2. 字体文件支持决定显示效果

即使你在 CSS 中设置了 font-weight: 600，如果所使用的字体文件中没有对应的 600 字重，浏览器会尝试使用最接近的可用字重来替代，这可能导致视觉效果不一致。

以下是一个常见字体的字重支持情况示例：

字体名称	支持的字重	说明
Roboto	100, 300, 400, 500, 700, 900	Google Fonts 提供多个字重版本
Open Sans	300, 400, 600, 700, 800	缺少 100 和 200 字重
Arial	400, 700	系统字体，字重支持有限

3. 如何验证字体是否支持指定字重？

可以通过以下方式确认字体是否支持某个字重值：

1. 查看字体官网或文档中的字重说明
2. 使用浏览器开发者工具检查元素，查看实际加载的字体文件
3. 在 @font-face 中显式声明每个字重对应的字体文件

示例：显式定义多个字重的 @font-face

@font-face {
    font-family: 'MyFont';
    src: url('myfont-300.woff2') format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: 'MyFont';
    src: url('myfont-700.woff2') format('woff2');
    font-weight: 700;
}

4. 浏览器如何处理不支持的字重？

当指定的 font-weight 值在字体中不存在时，浏览器会根据以下规则进行匹配：

• 优先匹配相同字重
• 若无匹配，则向 400 和 700 靠近
• 最终使用最接近的已有字重渲染

这可能导致视觉效果与预期不一致。例如：

p {
    font-family: 'Arial';
    font-weight: 600; /* 实际渲染为 400 */
}

建议在使用非系统字体时，确保字体文件包含所需字重。

5. 跨平台与浏览器渲染差异

不同操作系统（如 macOS、Windows）或浏览器（如 Chrome、Firefox）对字体渲染的算法略有不同，这可能导致相同 font-weight 值在不同环境下的视觉效果不一致。

以下是一些常见差异示例：

• macOS 上字体通常渲染得更细
• Windows 上字体可能显得更粗
• Firefox 和 Chrome 对某些字体的抗锯齿处理不同

建议使用 Can I Use 或 Google Fonts 来测试字体在不同平台的表现。

6. 最佳实践与建议

为了确保 font-weight 正确应用并保持一致性，建议遵循以下最佳实践：

• 选择支持多个字重的 Web 字体（如 Google Fonts）
• 在 CSS 中使用数字值而非关键字，以获得更精确控制
• 在 @font-face 中显式声明每个字重对应的字体文件
• 使用浏览器开发者工具验证实际加载的字重
• 跨平台测试以确保视觉一致性

示例：使用 Google Fonts 的多个字重

/* HTML */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

/* CSS */
.title {
    font-family: 'Roboto';
    font-weight: 700;
}

.body-text {
    font-family: 'Roboto';
    font-weight: 400;
}

7. 进阶技巧：使用变量字体

随着 Web 技术的发展，可变字体（Variable Fonts） 成为一种新趋势。它们可以在一个字体文件中支持连续的字重变化（如从 100 到 900），而无需多个字体文件。

使用可变字体的示例：

@font-face {
    font-family: 'MyVariableFont';
    src: url('myvariablefont.woff2') format('woff2-variations');
    font-weight: 100 900;
}

.text {
    font-family: 'MyVariableFont';
    font-weight: 550; /* 精确控制字重 */
}

可变字体不仅提升性能，还提供了更灵活的字重控制方式。