在css中实现文字加粗主要通过font-weight属性完成，该属性用于控制字体的粗细程度，不同的取值对应不同的加粗效果，也可以结合其他属性间接实现文字加粗的效果。
font-weight属性的常用取值
font-weight是css中专门控制字体粗细的属性，其取值可以分为关键字取值和数字取值两类，不同取值的加粗效果不同。
关键字取值
- normal：默认值，表示正常的字体粗细，不加粗。
- bold：表示加粗的字体，是最常用的加粗取值。
- bolder：表示比继承的字体粗细更粗一级。
- lighter：表示比继承的字体粗细更细一级。
数字取值
font-weight的数字取值范围为100到900，步长为100，数值越大字体越粗，其中400对应normal，700对应bold。部分字体可能不支持所有数值，会就近匹配已有的粗细值。
文字加粗的基础实现示例
以下是使用font-weight实现文字加粗的基础代码示例：
/* 类名为bold-text的元素文字加粗 */
.bold-text {
font-weight: bold;
}
/* 类名为custom-bold的元素使用数字取值加粗 */
.custom-bold {
font-weight: 700;
}
/* 段落内的strong标签默认加粗，可自定义调整 */
p strong {
font-weight: bolder;
}
对应的html结构如下：
<p class="bold-text">这段文字会被加粗显示</p> <p class="custom-bold">这段文字使用数字取值加粗</p> <p>这段文字里的<strong>重点内容</strong>会更粗</p>
其他间接实现文字加粗的方式
除了直接使用font-weight属性，还有一些其他方式可以间接实现文字加粗的效果，不过适用场景相对有限。
使用strong标签的默认样式
html中的<strong>标签默认会被浏览器赋予font-weight:bold的样式，因此直接使用该标签包裹文字也能实现加粗，不过这种方式更偏向语义化，适合表示重要文本。
使用更粗的字体族
如果引入了多种粗细的字体族，可以通过font-family指定更粗的字体版本来实现加粗效果，例如引入字体的700粗细版本，然后指定该字体族即可。
使用注意事项
- 不是所有字体都支持全部的font-weight取值，如果设置的数字取值字体不支持，浏览器会自动匹配最接近的可用粗细值。
- bolder和lighter的取值是相对于父元素的字体粗细计算的，不同层级的嵌套下效果会有差异。
- 不要为了单纯实现加粗效果滥用<strong>标签，避免影响页面的语义化结构和无障碍访问体验。
- 如果需要对特定状态的文字加粗，比如hover时的效果，可以直接结合伪类设置font-weight属性。
以下是hover状态加粗的代码示例：
/* 鼠标悬停时文字加粗 */
.hover-bold {
transition: font-weight 0.2s;
}
.hover-bold:hover {
font-weight: bold;
}
CSSfont-weight文字加粗bold修改时间：2026-07-23 04:21:22