CSS字体粗细
CSS字体粗细[编辑 | 编辑源代码]
CSS字体粗细（font-weight）是CSS中用于控制文本粗细程度的属性，它决定了文字在视觉上的“重量”，从极细到极粗均可设置。该属性对网页排版的可读性和视觉层次有重要影响。
基本概念[编辑 | 编辑源代码]
font-weight属性定义字体的笔画粗细，其取值可以是：
- 关键字（normal, bold, lighter, bolder）
- 数值（100到900，以100为增量）
浏览器默认的常规字体粗细通常是400（相当于normal），粗体是700（相当于bold）。但实际渲染效果取决于字体家族是否包含对应的粗细变体。
属性值详解[编辑 | 编辑源代码]
| 值类型 | 说明 | 等效数值 |
|---|---|---|
| 标准粗细 | 400 | ||
| 加粗 | 700 | ||
| 比父元素更细 | 相对值 | ||
| 比父元素更粗 | 相对值 | ||
| 数值粗细（100的整数倍） | - |
数值体系[编辑 | 编辑源代码]
字体粗细的数值范围遵循CSS规范定义的9级刻度：
注意：如果字体家族不支持特定数值，浏览器会自动选择最接近的可用值（如设置500但字体只有400和600时，可能显示为400）。
代码示例[编辑 | 编辑源代码]
基础用法[编辑 | 编辑源代码]
/* 关键字用法 */
p.normal {
font-weight: normal; /* 等同于400 */
}
p.bold {
font-weight: bold; /* 等同于700 */
}
/* 数值用法 */
h1 {
font-weight: 900; /* 最粗 */
}
.subtle {
font-weight: 300; /* 较细 */
}
相对值示例[编辑 | 编辑源代码]
<style>
div.parent { font-weight: 600; }
div.child-lighter { font-weight: lighter; } /* 可能显示为400 */
div.child-bolder { font-weight: bolder; } /* 可能显示为700或800 */
</style>
<div class="parent">
父元素文本
<div class="child-lighter">更细的子文本</div>
<div class="child-bolder">更粗的子文本</div>
</div>
实际应用场景[编辑 | 编辑源代码]
创建视觉层次[编辑 | 编辑源代码]
通过不同粗细建立信息层级：
/* 新闻网站示例 */
article h2 {
font-weight: 700; /* 标题突出 */
}
article p {
font-weight: 400; /* 正文标准 */
}
article .quote {
font-weight: 300; /* 引文较细 */
}
响应式设计[编辑 | 编辑源代码]
在不同设备上优化可读性：
/* 移动设备使用稍粗字体提高可读性 */
@media (max-width: 768px) {
body {
font-weight: 450; /* 介于normal和medium之间 */
}
}
技术细节[编辑 | 编辑源代码]
字体家族匹配[编辑 | 编辑源代码]
当使用数值时，浏览器按以下逻辑选择字体： 1. 精确匹配指定数值 2. 若无精确匹配，选择相邻数值 3. 若300-500均不存在，可能合成粗细（font-synthesis）
数学上，合成公式近似为：
浏览器兼容性[编辑 | 编辑源代码]
所有现代浏览器完全支持font-weight属性，但需注意：
- 部分旧版IE对数值支持不完全
- 字体文件必须包含对应粗细变体才能准确渲染
- 合成粗细可能在不同浏览器有差异
最佳实践[编辑 | 编辑源代码]
1. 优先使用字体自带的粗细变体而非合成 2. 移动端考虑使用稍粗字体（450-500） 3. 正文文本避免使用小于300的数值 4. 测试不同操作系统下的渲染效果