在CSS样式开发中，调整字体粗细是优化页面视觉层级的重要手段，font-weight属性专门用于设置文本的粗细程度，通过合理配置该属性，可以让标题、核心提示等内容和普通正文形成明显区分，引导用户快速捕捉页面重点。不同字体的粗细支持范围存在差异，使用时需要结合字体本身的特性调整取值，避免出现样式不生效的情况。
font-weight属性的基本取值
font-weight的取值分为关键字取值和数字取值两类，常见的取值如下：
- normal：默认值，对应常规字体粗细，通常等同于数字取值400
- bold：加粗字体，通常等同于数字取值700
- lighter：比继承的字体粗细更细，具体效果取决于当前元素继承的粗细值
- bolder：比继承的字体粗细更粗，具体效果取决于当前元素继承的粗细值
- 100-900：数字取值，步长为100，数值越大字体越粗，400对应normal，700对应bold
基础使用示例
下面是通过font-weight设置不同文本粗细的基础代码示例：
/* 设置一级标题为加粗，等同于font-weight: 700 */
h1 {
font-weight: bold;
}
/* 设置二级标题为较粗字体，数值800比700更粗 */
h2 {
font-weight: 800;
}
/* 设置正文中的重点提示为加粗 */
.highlight-tip {
font-weight: bold;
color: #333;
}
/* 设置次要说明文本为更细的字体 */
.secondary-desc {
font-weight: lighter;
}
实际使用注意事项
字体本身的粗细支持限制
不是所有字体都支持100到900的全范围取值，如果使用的字体只内置了normal和bold两种粗细，那么设置100-300、500-600、800-900这些取值时，最终显示效果都会归为最近的已有粗细值。比如设置font-weight: 500，如果字体没有对应的中等粗细，会按照400的normal效果显示。
数字取值的兼容性
数字取值的兼容性较好，主流浏览器都支持100-900的所有取值，但是最终显示效果还是受字体本身的限制。如果需要确保加粗效果生效，优先使用font-weight: bold或者font-weight: 700，这两种取值的兼容性更稳定。
继承特性
font-weight属性是可以继承的，子元素会默认继承父元素的font-weight取值，如果子元素需要不同的粗细，需要单独重新设置该属性。比如父元素设置了font-weight: bold，子元素如果不想加粗，需要显式设置font-weight: normal。
场景化示例：突出文章标题和重点内容
下面是一个完整的HTML和CSS示例，展示如何通过font-weight区分文章标题、小标题和重点提示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>font-weight使用示例</title>
<style>
/* 文章主标题，最粗 */
.article-title {
font-weight: 900;
font-size: 28px;
margin-bottom: 20px;
}
/* 文章小标题，次粗 */
.section-title {
font-weight: 700;
font-size: 20px;
margin: 15px 0;
}
/* 普通正文，常规粗细 */
.article-content {
font-weight: 400;
font-size: 16px;
line-height: 1.8;
}
/* 重点提示内容，加粗突出 */
.important-note {
font-weight: bold;
color: #e63946;
padding: 10px;
background-color: #f1faee;
}
</style>
</head>
<body>
<h1 class="article-title">CSS字体粗细设置完全指南</h1>
<h2 class="section-title">font-weight基础用法</h2>
<p class="article-content">font-weight是CSS中控制字体粗细的核心属性，支持多种取值方式，可以灵活调整文本的显示效果。</p>
<div class="important-note">注意：字体本身的粗细支持范围会影响最终显示效果，设置前需要确认所用字体的特性。</div>
<h2 class="section-title">取值优先级说明</h2>
<p class="article-content">当同时设置多个font-weight相关样式时，优先级遵循CSS样式优先级规则，行内样式优先级高于内部样式，ID选择器优先级高于类选择器。</p>
</body>
</html>
常见问题解答
问：设置了font-weight: bold但是字体没有加粗是什么原因？
答：首先检查使用的字体是否支持加粗样式，其次检查是否有其他样式覆盖了该属性，还可以通过浏览器的开发者工具查看最终生效的样式值。
问：lighter和bolder的具体粗细是多少？
答：这两个值是相对值，会根据继承的字体粗细计算，比如继承的是400，lighter可能对应100或者200，bolder可能对应700或者800，具体取决于字体支持的粗细范围。
CSSfont-weight字体粗细前端样式修改时间：2026-06-11 12:42:25