CSS 文字加粗：从基础语法到高级应用

admin 2026-04-10 771次阅读

CSS 文字加粗：从基础语法到高级应用

在网页设计中，文字的视觉效果对于信息的层次传达和用户体验至关重要。CSS（层叠样式表）为我们提供了强大的工具来控制文本的呈现方式，其中，文字加粗是最常用且最基础的功能之一。它不仅仅是简单地让文字变粗，更是一种视觉语言，用于强调重点、区分标题与正文、以及构建清晰的页面结构。

一、基础方法：font-weight 属性

实现文字加粗最核心的 CSS 属性是 font-weight。它的值可以是关键字，也可以是数值。

关键字 bold：这是最直接的方法。将 font-weight 设置为 bold，浏览器会通常将字体的粗细渲染为 700。
```
.important-text {
  font-weight: bold;
}
```
数值表示法：font-weight 的数值范围通常是 100 到 900，步长为 100。其中：

400 相当于 normal（正常粗细）。
700 相当于 bold（加粗）。使用数值可以让你进行更精细的控制。例如，如果你觉得 bold 太粗，可以尝试 600；如果需要更粗，可以使用 800 或 900（前提是字体支持这些权重）。

二、理解字体家族的权重限制

一个关键且常被忽视的点是：font-weight 的效果取决于字体本身所包含的字重（Weight）变体。并非所有字体都提供了从 100 到 900 的所有粗细版本。

常见情况：许多网页安全字体（如 Arial, Helvetica, Georgia, Times New Roman）通常只包含 normal (400) 和 bold (700) 两种粗细。当你将 font-weight 设置为 700 时，浏览器会使用内置的 bold 变体。
特殊情况：如果你使用来自 Google Fonts 等服务的现代字体（如 Roboto, Open Sans, Lato），它们往往提供多个字重（如 Light 300, Regular 400, Medium 500, Semi-Bold 600, Bold 700, Extra-Bold 800）。在这种情况下，设置 font-weight: 600 就能精确地调用“半粗体”，呈现出与 700 不同的视觉效果。
字体回退机制：如果你指定了一个字体不支持的权重（例如，给一个只有常规和粗体版本的字体设置 font-weight: 300），浏览器会使用一个复杂的算法来匹配最接近的可用权重。通常，如果指定的权重低于 400，则会选择最接近的较细权重（如果不存在，则可能还是 400）；如果高于 500，则会选择最接近的较粗权重（如果不存在，则可能还是 700）。这可能导致渲染效果与预期不符。

三、b 和 strong 标签的语义化与样式

在 HTML 中，我们也有  和  标签，它们默认的样式都是加粗。

 标签：这是一个纯样式标签，仅表示“这段文字需要被突出显示，但不传达任何额外的重要性”。在现代网页开发中，建议使用 CSS 来替代  标签实现纯粹的视觉加粗，以实现结构与样式的分离。
 标签：这是一个语义化标签。它不仅使文字加粗，更重要的是向浏览器和辅助技术（如屏幕阅读器）表明这段内容具有强烈的重要性或紧急性。屏幕阅读器可能会用不同的语调来朗读  包裹的内容。

最佳实践是：当你需要强调内容的意义时，使用 ，然后用 CSS 控制其具体样式（你甚至可以将其样式改为不加粗但改变颜色）；当你仅仅需要视觉上的加粗而无特殊含义时，使用 CSS 的 font-weight 属性。

四、高级技巧与注意事项

使用 @font-face 定义自定义字重：当使用自定义字体时，你需要通过 @font-face 规则来明确定义每个字重对应的字体文件。这对于确保所有字重都能正确加载和显示至关重要。

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
body {
  font-family: