编辑“︁CSS字体粗细”︁

= CSS字体粗细 =

'''CSS字体粗细'''（font-weight）是CSS中用于控制文本粗细程度的属性，它决定了文字在视觉上的“重量”，从极细到极粗均可设置。该属性对网页排版的可读性和视觉层次有重要影响。

== 基本概念 ==

font-weight属性定义字体的笔画粗细，其取值可以是：
* 关键字（normal, bold, lighter, bolder）
* 数值（100到900，以100为增量）

浏览器默认的常规字体粗细通常是400（相当于normal），粗体是700（相当于bold）。但实际渲染效果取决于字体家族是否包含对应的粗细变体。

== 属性值详解 ==

{| class="wikitable"
|+ font-weight有效值
! 值类型 !! 说明 !! 等效数值
|-
| normal | 标准粗细 | 400
|-
| bold | 加粗 | 700
|-
| lighter | 比父元素更细 | 相对值
|-
| bolder | 比父元素更粗 | 相对值
|-
| 100-900 | 数值粗细（100的整数倍） | -
|}

=== 数值体系 ===

字体粗细的数值范围遵循CSS规范定义的9级刻度：

<mermaid>
pie
    title 字体粗细数值分布
    "100 (Thin)" : 1
    "200 (Extra Light)" : 1
    "300 (Light)" : 1
    "400 (Normal)" : 1
    "500 (Medium)" : 1
    "600 (Semi Bold)" : 1
    "700 (Bold)" : 1
    "800 (Extra Bold)" : 1
    "900 (Black)" : 1
</mermaid>

注意：如果字体家族不支持特定数值，浏览器会自动选择最接近的可用值（如设置500但字体只有400和600时，可能显示为400）。

== 代码示例 ==

=== 基础用法 ===

<syntaxhighlight lang="css">
/* 关键字用法 */
p.normal {
  font-weight: normal;  /* 等同于400 */
}
p.bold {
  font-weight: bold;    /* 等同于700 */
}

/* 数值用法 */
h1 {
  font-weight: 900;     /* 最粗 */
}
.subtle {
  font-weight: 300;     /* 较细 */
}
</syntaxhighlight>

=== 相对值示例 ===

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== 实际应用场景 ==

=== 创建视觉层次 ===

通过不同粗细建立信息层级：
<syntaxhighlight lang="css">
/* 新闻网站示例 */
article h2 {
  font-weight: 700;  /* 标题突出 */
}
article p {
  font-weight: 400;  /* 正文标准 */
}
article .quote {
  font-weight: 300;  /* 引文较细 */
}
</syntaxhighlight>

=== 响应式设计 ===

在不同设备上优化可读性：
<syntaxhighlight lang="css">
/* 移动设备使用稍粗字体提高可读性 */
@media (max-width: 768px) {
  body {
    font-weight: 450;  /* 介于normal和medium之间 */
  }
}
</syntaxhighlight>

== 技术细节 ==

=== 字体家族匹配 ===

当使用数值时，浏览器按以下逻辑选择字体：
1. 精确匹配指定数值
2. 若无精确匹配，选择相邻数值
3. 若300-500均不存在，可能合成粗细（font-synthesis）

数学上，合成公式近似为：
<math>
W_{render} = \begin{cases}
W_{available} & \text{如果存在匹配} \\
W_{specified} \times 0.7 + W_{nearest} \times 0.3 & \text{合成情况}
\end{cases}
</math>

== 浏览器兼容性 ==

所有现代浏览器完全支持font-weight属性，但需注意：
* 部分旧版IE对数值支持不完全
* 字体文件必须包含对应粗细变体才能准确渲染
* 合成粗细可能在不同浏览器有差异

== 最佳实践 ==

1. 优先使用字体自带的粗细变体而非合成
2. 移动端考虑使用稍粗字体（450-500）
3. 正文文本避免使用小于300的数值
4. 测试不同操作系统下的渲染效果

== 参见 ==

* [[CSS字体样式]]
* [[CSS字体家族]]
* [[响应式排版技术]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]