在CSS中控制文字加粗最直接的方式是使用font-weight属性。该属性用来设置字体的笔画宽度，能够精确地决定文本在页面中呈现的粗细程度。除了font-weight之外，HTML中的语义标签以及自定义字体族的搭配也能间接实现文字加粗效果。理解这些方法有助于在布局和排版中更灵活地控制视觉层级与阅读体验。下面将围绕取值规则、基础示例、间接实现方式以及使用注意事项展开介绍。
font-weight属性的取值与匹配机制
font-weight是CSS中专门用来控制字体粗细的属性。它的取值可以分为关键字和数字两大类，两者在多数情况下可以互换使用，但底层匹配逻辑存在一些差异。关键字取值更直观，适合日常开发中的快速设置；数字取值则提供了更细粒度的控制能力，便于实现更精确的排版需求。
在关键字取值中，normal表示正常粗细，即不加粗的默认状态；bold表示加粗，是最常用的加粗取值；bolder和lighter则是相对取值，分别表示比父元素的字体粗细更粗一级或更细一级。相对取值在嵌套结构中会受到父级样式的影响，因此实际效果需要结合上下文来判断。例如父元素设置为normal时，子元素的bolder通常会匹配到bold；而如果父元素已经是bold，bolder则可能进一步匹配到更粗的数值。
数字取值的范围是100到900，步长为100，数值越大表示字体越粗。其中400对应normal，700对应bold，这是一个广泛遵循的映射关系。需要注意的是，并非所有字体都完整支持九个级别的粗细。当指定的数字取值在当前字体中不可用时，浏览器会根据字体实际提供的粗细等级进行就近匹配。例如某款字体只包含400和700两个等级，设置font-weight: 500时，浏览器通常会将其匹配到400或700中更接近的一个，具体结果取决于浏览器和字体本身的渲染规则。
使用font-weight实现文字加粗的基础示例
在实际开发中，最常用的做法是通过类选择器为指定元素设置font-weight属性。使用关键字bold可以快速实现加粗，使用数字取值700也能达到几乎相同的效果。如果需要基于父元素进行相对加粗，可以使用bolder，这样能够自动适应不同层级的字体粗细设置。
下面是一段完整的CSS样式代码，展示了三种常见的文字加粗设置方式：
/* 使用关键字bold实现标准加粗 */
.title-bold {
font-weight: bold;
}
/* 使用数字700实现与bold等价的加粗效果 */
.text-weight-700 {
font-weight: 700;
}
/* 在父元素设置为500的基础上，子元素使用bolder继续加粗 */
.parent-text {
font-weight: 500;
}
.child-text {
font-weight: bolder;
}
对应的HTML结构可以按照下面的方式组织。其中第一个段落使用title-bold类，第二个段落使用text-weight-700类，第三个示例则展示了父元素与子元素之间相对加粗的关系。
<p class="title-bold">这段文字使用关键字加粗</p>
<p class="text-weight-700">这段文字使用数字取值加粗</p>
<div class="parent-text">
<p class="child-text">这段文字会在父级基础上变得更粗</p>
</div>
从实际渲染结果来看，bold和700在支持标准字体粗细映射的字体中表现一致。而bolder的效果则取决于父元素的设置，这种相对取值可以让嵌套结构中的文字粗细保持一定的层级关系，但需要特别留意父级样式是否明确指定了粗细值。
间接实现文字加粗的方式
除了直接使用font-weight属性，还可以借助HTML中的语义标签或不同粗细的字体族来间接实现加粗效果。这两种方式在特定场景下各有优势，但它们的设计目标和适用条件并不相同，使用时需要根据实际需求进行选择。
HTML中的 <strong> 标签在浏览器默认样式中通常带有font-weight: bold的声明，因此直接使用该标签包裹文字也能实现加粗。不过从语义角度看，<strong> 更强调内容的重要性，而不仅仅是为了改变视觉样式。如果一段文字在语义上确实需要突出显示，使用 <strong> 是合理的；但如果仅仅是为了视觉加粗而大量使用该标签，会破坏页面的语义结构，也可能对屏幕阅读器等无障碍访问工具造成干扰。
另一种间接方式是使用更粗的字体族。如果页面中通过@font-face或外部字体服务引入了同一字体的多个粗细版本，那么可以通过font-family指定具体的字体名称，或者结合font-weight让浏览器加载对应的粗体字体文件。例如引入了一款字体的400和700两个版本后，设置font-weight: 700时浏览器会优先使用700版本的字体文件，从而获得真正的加粗效果，而不是简单地通过算法合成伪粗体。
使用注意事项与交互状态示例
在使用font-weight时，有几个细节值得关注。首先，并非所有字体都支持从100到900的全部数值，部分字体可能只提供少数几个粗细等级。当设置了一个不受支持的数值时，浏览器会按照就近原则匹配可用的等级，这可能导致实际显示效果与预期略有差异。因此在进行精细排版时，最好提前确认目标字体支持的粗细范围。
其次，bolder和lighter这两个相对取值会受到父元素字体粗细的影响。在多层嵌套结构中，如果父元素没有明确设置font-weight，继承而来的值可能是浏览器的默认值或更上层元素的计算值，这会让相对取值的结果难以预测。此外，不要为了单纯实现加粗而滥用 <strong> 标签，应当优先考虑使用CSS类来控制样式，同时保持HTML结构的语义清晰。
在交互场景中，文字加粗常常用于悬停、聚焦或选中状态。此时可以结合伪类选择器为元素设置不同的font-weight，并通过transition让粗细变化更加平滑。需要注意的是，部分浏览器对font-weight的过渡动画支持并不完美，动画过程中可能出现轻微跳动，但整体上仍然能够提供较好的视觉反馈。
下面是一个鼠标悬停时实现文字加粗的示例：
/* 默认状态为正常粗细，并添加过渡效果 */
.interactive-bold {
font-weight: normal;
transition: font-weight 0.2s ease;
}
/* 鼠标悬停时切换为加粗状态 */
.interactive-bold:hover {
font-weight: 700;
}
总的来说，CSS中的文字加粗主要通过font-weight属性实现，关键字bold和数字700是最常用的两种取值。相对取值bolder和lighter适合需要根据父级动态调整的场景。间接方式则包括使用语义标签和指定粗体字体族，但需要避免滥用标签影响语义。在实际项目中，建议优先通过CSS类统一管理加粗样式，并根据字体支持情况选择合适的数值，这样既能保证显示效果的一致性，也有助于维护清晰的代码结构。
CSSfont-weight文字加粗bold修改时间：2026-07-23 04:21:22