CSS中的font-weight属性详解

1. 属性描述
font-weight属性用于设置文本字体的粗细程度，控制字符笔画的粗细表现。该属性主要适用于西文字体家族，对中文字体的支持相对有限。属性值可以使用关键字（如normal、bold）或数值（100-900），其效果取决于字体家族本身提供的字重变体。

2. 属性值详解

• 关键字值：

  • normal：正常字重（相当于数值400）
  • bold：加粗字重（相当于数值700）
  • lighter：比父元素更细的字重（根据继承值计算）
  • bolder：比父元素更粗的字重（根据继承值计算）

• 数值值：

  • 100-900：定义9级精细字重，步长为100
  • 100(Thin) → 200(Extra Light) → 300(Light) → 400(Normal) → 500(Medium) → 600(Semi Bold) → 700(Bold) → 800(Extra Bold) → 900(Black)

3. 字重匹配机制
当指定字重不存在时，浏览器按以下规则匹配：

1. 优先匹配精确值（如设置700时直接使用Bold字重）
2. 若无精确匹配，使用最接近的可用字重（如600可能回退到700）
3. 若指定值<400，优先匹配更细字重，其次更粗字重
4. 若指定值>500，优先匹配更粗字重，其次更细字重
5. 若指定值=400，优先匹配500，其次300
6. 若指定值=500，优先匹配400，其次300

4. lighter/bolder计算规则
相对值基于继承的字重数值进行计算：

• lighter：向更细方向调整（700→400，400→300，300→100）
• bolder：向更粗方向调整（100→400，400→700，700→900）

5. 实际应用要点

• 字体支持检查：使用@font-face的font-weight描述符声明多字重

@font-face {
  font-family: "Custom";
  src: url("font-light.woff2") format("woff2");
  font-weight: 300; /* 明确定义字重 */
}

• 回退策略：中文字体建议使用normal/bold关键字而非数值
• 性能优化：预加载关键字重避免布局偏移

<link rel="preload" href="font-bold.woff2" as="font" type="font/woff2" crossorigin>

6. 常见问题解决方案

• 字重不生效：检查字体是否支持该字重，或使用font-synthesis控制合成加粗
• 跨平台差异：使用字体栈提供跨系统一致性（如system-ui, -apple-system）
• 可访问性：确保相邻字重有足够对比度（WCAG建议字重差≥200）

通过系统化设置字重体系，可建立清晰的视觉层次，增强排版的专业性和可读性。