悠悠楠杉
网站页面
CSS文本加粗全攻略：从基础到高阶的字体加粗方法
07/07
本文将深入讲解CSS中5种实现文本加粗的方法，包括font-weight属性的所有取值技巧，通过实际代码示例演示如何精准控制网页字体的粗细显示效果。
在网页设计中，文字加粗是最常用的文本突出显示手法之一。与Word等办公软件单纯点击"加粗按钮"不同，CSS提供了更精细的字体控制能力。下面我们就系统性地掌握CSS加粗文本的各类方法。
一、font-weight基础用法
最直接的加粗方式是使用font-weight: bold属性：
css
.basic-bold {
font-weight: bold; /* 标准加粗效果 */
}
这相当于HTML中的<b>标签效果，但更推荐使用CSS实现样式控制。有趣的是，bold实际对应的是数值700，我们后文会详细解释。
二、数值化粗细控制
font-weight其实支持9级数值定义：
css
.weight-levels {
font-weight: 100; /* Thin */
font-weight: 200; /* Extra Light */
font-weight: 300; /* Light */
font-weight: 400; /* Normal */
font-weight: 500; /* Medium */
font-weight: 600; /* Semi Bold */
font-weight: 700; /* Bold */
font-weight: 800; /* Extra Bold */
font-weight: 900; /* Black */
}
实际开发中要注意：
1. 400对应normal，700对应bold
2. 多数中文字体只支持400和700两档
3. 英文字体（如Roboto）通常支持更多档位
三、相对加粗方法
CSS3新增了相对加粗语法：
css
.dynamic-bold {
font-weight: lighter; /* 比父元素更细 */
font-weight: bolder; /* 比父元素更粗 */
}
这种写法在组件化开发中特别实用，比如在已加粗的按钮内嵌套文本时，可以自动调整层级粗细。
四、字体族匹配策略
当指定加粗但字体文件不存在时，浏览器会模拟加粗效果。为避免失真，建议：
css
.proper-font {
font-family: "Helvetica Neue", sans-serif;
font-weight: 700;
}
最佳实践是：
1. 确保字体包包含对应字重文件
2. 使用@font-face自定义字体时上传所有字重
3. 西文字体优先使用font-family的weight后缀版本（如"Roboto Bold"）
五、实际应用场景示例
1. 标题层级控制
css
h1 { font-weight: 900; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
2. 交互状态反馈
css
button:hover {
font-weight: bolder;
transition: font-weight 0.3s; /* 平滑过渡效果 */
}
3. 重点内容强调
css
.important {
font-weight: 700;
color: #e74c3c;
}
六、常见问题解决方案
加粗无效检查清单：
- 确认字体支持该字重
- 检查是否有更高优先级样式覆盖
- 尝试使用数值而非关键词
性能优化建议：
- 避免对大量文本使用加粗
- 中文字体建议预加载常用字重
- 考虑使用font-synthesis控制合成粗体
视觉平衡技巧：
- 加粗文本需适当增加字距
- 深色背景上建议使用较高字重
- 正文加粗段落建议不超过15%
结语
CSS字体加粗看似简单，实则蕴含着精妙的排版哲学。从基本的bold属性到精确的数值控制，再到响应式的相对加粗，合理运用这些技巧可以让网页文本呈现专业级的视觉效果。记住，优秀的排版就像好的爵士乐——既要有明确的节奏（基础字重），也要有即兴的变奏（动态调整）。
