CSS 字体粗细

font-weight 属性用于设置文本的粗细程度，控制字体的字重。

语法

css

font-weight: [值];

取值

关键字值

normal：默认值，标准粗细（相当于 400）
bold：粗体（相当于 700）
bolder：相对于父元素更粗
lighter：相对于父元素更细

数值值

100：最细
200：超细
300：细
400：正常（与 normal 相同）
500：中等
600：半粗
700：粗体（与 bold 相同）
800：超粗
900：最粗

注意事项

字体支持：并非所有字体都支持所有字重，通常只有常规（400）和粗体（700）是最常用和广泛支持的。
浏览器渲染：如果指定的字重不被字体支持，浏览器会自动选择最接近的可用字重。
数值与关键字对应：400 = normal，700 = bold。

示例

css

.normal-text {
  font-weight: normal;
  /* 等同于 font-weight: 400; */
}

.bold-text {
  font-weight: bold;
  /* 等同于 font-weight: 700; */
}

.light-text {
  font-weight: 300;
}

.extra-bold-text {
  font-weight: 800;
}

.relative-bold {
  font-weight: bolder;
}

.relative-light {
  font-weight: lighter;
}

实际应用

标题样式：通常为粗体（bold 或 700）
强调文本：使用粗体突出重要内容
导航菜单：根据设计需求设置适当的字重
按钮文本：通常使用粗体提高可点击感

最佳实践

使用数值而非关键字：数值提供更精确的控制，且易于理解其相对粗细程度。
保持一致性：在整个网站中保持字重使用的一致性，建立清晰的视觉层次。
考虑字体特性：选择支持多种字重的字体，以获得更好的设计效果。
注意可访问性：确保重要文本通过适当的字重与其他文本区分开，提高可读性。