CSS3 文本样式 - font-weight 属性

核心知识点

  1. font-weight 属性的基本概念
  2. font-weight 的取值范围
  3. 字体粗细的相对值与绝对值
  4. 字体粗细的实际应用
  5. 字体粗细与字体家族的关系
  6. 字体粗细的浏览器兼容性
  7. 字体粗细的性能考虑

学习目标

  1. 理解 font-weight 属性的作用和语法
  2. 掌握 font-weight 的各种取值及其效果
  3. 能够根据设计需求选择合适的字体粗细
  4. 了解字体粗细与字体家族的依赖关系
  5. 学会在不同场景下应用字体粗细属性

一、font-weight 属性的基本概念

font-weight 属性用于指定文本的粗细程度，是 CSS3 文本样式中的重要属性之一。它可以使文本看起来更粗或更细，从而在视觉上突出重要内容或创建层次感。

语法

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

二、font-weight 的取值范围

font-weight 属性支持以下几类取值：

1. 关键字值

  • normal：默认值，等同于 400
  • bold：粗体，等同于 700
  • bolder：比父元素更粗
  • lighter：比父元素更细

2. 数值值

  • 100：最细
  • 200：较细
  • 300：细
  • 400：正常（等同于 normal）
  • 500：中等
  • 600：半粗
  • 700：粗（等同于 bold）
  • 800：较粗
  • 900：最粗

三、字体粗细的相对值与绝对值

绝对值

数值值（100-900）和关键字 normal、bold 都是绝对值，它们直接指定了字体的粗细程度，不依赖于父元素的设置。

相对值

关键字 bolder 和 lighter 是相对值，它们基于父元素的字体粗细来计算当前元素的字体粗细。

相对值计算规则

  1. 首先将父元素的字体粗细转换为对应的数值（如果是关键字）
  2. bolder：向上取最接近的可用粗细值
  3. lighter：向下取最接近的可用粗细值

四、字体粗细的实际应用

示例 1：基本使用

/* 正常粗细 */
.normal-text {
  font-weight: normal;
}

/* 粗体 */
.bold-text {
  font-weight: bold;
}

/* 数值表示 */
.light-text {
  font-weight: 300;
}

.heavy-text {
  font-weight: 800;
}

示例 2：创建视觉层次

/* 标题样式 */
h1 {
  font-weight: 900;
}

h2 {
  font-weight: 700;
}

h3 {
  font-weight: 600;
}

/* 正文样式 */
p {
  font-weight: 400;
}

/* 强调文本 */
.emphasis {
  font-weight: 500;
}

示例 3：响应式字体粗细

/* 移动端 */
@media (max-width: 768px) {
  h1 {
    font-weight: 700; /* 在小屏幕上使用较细的粗体 */
  }
}

/* 桌面端 */
@media (min-width: 769px) {
  h1 {
    font-weight: 900; /* 在大屏幕上使用更粗的字体 */
  }
}

五、字体粗细与字体家族的关系

字体粗细的效果取决于字体家族是否支持相应的粗细变体。如果字体家族不支持指定的粗细值，浏览器会尝试使用最接近的可用粗细。

常见情况

  1. 字体家族完全支持：如 Google Fonts 中的许多字体，支持从 100 到 900 的所有粗细值
  2. 字体家族部分支持：如系统默认字体，可能只支持 normal 和 bold
  3. 字体家族不支持：浏览器会模拟所需的粗细，可能导致效果不理想

选择合适的字体

为了获得最佳效果，建议选择支持多种粗细变体的字体，特别是在需要创建丰富视觉层次的设计中。

六、字体粗细的浏览器兼容性

font-weight 属性在所有现代浏览器中都得到了良好支持。然而，不同浏览器对字体粗细的渲染可能略有差异，特别是在处理非标准粗细值时。

兼容性注意事项

  1. 数值值：在所有现代浏览器中都支持
  2. 相对值：在所有现代浏览器中都支持
  3. 字体模拟：当字体不支持指定粗细时，浏览器会模拟，可能导致渲染不一致

七、字体粗细的性能考虑

使用过多不同的字体粗细可能会增加字体文件的大小，从而影响页面加载速度。

性能优化建议

  1. 选择必要的粗细：只包含设计所需的字体粗细变体
  2. 使用字体子集：只加载需要的字符
  3. 考虑系统字体：系统字体通常支持基本粗细，且无需额外加载

八、ASCII 示意图：字体粗细层次

字体粗细层次示意图：

┌─────────────────────────────────────────────────────┐
│ 900 - Black (最粗)                                   │
│ 800 - Extra Bold                                    │
│ 700 - Bold (等同于 bold 关键字)                      │
│ 600 - Semi Bold                                     │
│ 500 - Medium                                        │
│ 400 - Normal (等同于 normal 关键字，默认值)           │
│ 300 - Light                                         │
│ 200 - Extra Light                                   │
│ 100 - Thin (最细)                                    │
└─────────────────────────────────────────────────────┘

九、实战练习

练习 1：创建文本层次结构

创建一个包含标题、副标题和正文的页面，使用不同的字体粗细来建立清晰的视觉层次。

要求：

  • h1 使用 900 粗细
  • h2 使用 700 粗细
  • h3 使用 600 粗细
  • 正文使用 400 粗细
  • 强调文本使用 500 粗细

练习 2：响应式字体粗细

创建一个页面，在不同屏幕尺寸下使用不同的字体粗细。

要求：

  • 在小屏幕（< 768px）上，标题使用 700 粗细
  • 在大屏幕（≥ 768px）上，标题使用 900 粗细
  • 正文在所有屏幕尺寸上保持 400 粗细

练习 3：字体粗细与字体家族

测试不同字体家族对字体粗细的支持情况。

要求：

  • 测试至少 3 种不同的字体家族
  • 对每种字体应用从 100 到 900 的粗细值
  • 记录哪些字体家族支持更多的粗细变体

十、总结

  1. font-weight 属性用于控制文本的粗细程度，是创建视觉层次的重要工具
  2. 它支持关键字值（normal、bold、bolder、lighter）和数值值（100-900）
  3. 字体粗细的效果依赖于字体家族是否支持相应的粗细变体
  4. 在选择字体粗细时，应考虑设计需求、浏览器兼容性和性能影响
  5. 通过合理使用字体粗细，可以增强文本的可读性和视觉吸引力

十一、扩展阅读

  1. MDN Web Docs: font-weight
  2. CSS-Tricks: font-weight
  3. Google Fonts - 提供支持多种粗细变体的字体
  4. Can I Use: font-weight
« 上一篇 CSS3 文本样式 - font-size 属性 下一篇 » CSS3 文本样式 - font-style 属性
↑