CSS3 文本样式 - font-size 属性

核心知识点

font-size 属性的基本概念
字体大小的单位
font-size 属性的语法和使用方法
字体大小的继承和计算
字体大小的最佳实践
响应式字体大小的设置

学习目标

掌握 font-size 属性的基本概念和语法
理解不同字体大小单位的特点和应用场景
能够正确设置和使用 font-size 属性
了解字体大小的继承和计算规则
掌握响应式字体大小的设置方法

重点难点

重点：font-size 属性的语法和字体大小单位
难点：不同字体大小单位的选择和响应式字体大小的设置

理论讲解

font-size 属性的基本概念

font-size 属性用于设置元素的字体大小。它是 CSS 中最常用的文本样式属性之一，直接影响文本的可读性和页面的视觉层次结构。

字体大小的单位

CSS3 支持多种字体大小单位，主要包括：

绝对单位：
- px（像素）：固定大小，不随父元素变化
- pt（点）：印刷单位，1pt = 1/72英寸
- pc（派卡）：印刷单位，1pc = 12pt
- in（英寸）：物理单位
- cm（厘米）：物理单位
- mm（毫米）：物理单位
相对单位：
- em：相对于父元素的字体大小
- rem：相对于根元素（html）的字体大小
- %：相对于父元素的字体大小
- vw：相对于视口宽度的 1%
- vh：相对于视口高度的 1%
- vmin：相对于视口宽度和高度中较小值的 1%
- vmax：相对于视口宽度和高度中较大值的 1%
- ch：相对于数字 "0" 的宽度
- ex：相对于字母 "x" 的高度

font-size 属性的语法

font-size 属性的基本语法格式如下：

selector {
  font-size: value;
}

其中，value 可以是以下形式之一：

长度值：如 16px、1.2em、120% 等
关键字：如 xx-small、x-small、small、medium、large、x-large、xx-large、smaller、larger
inherit：继承父元素的字体大小

字体大小的继承和计算

字体大小是可继承的属性，子元素会继承父元素的字体大小，除非显式设置了自己的字体大小。

当使用相对单位时，字体大小的计算规则如下：

em：相对于父元素的字体大小
rem：相对于根元素（html）的字体大小
%：相对于父元素的字体大小
视口单位：相对于视口的大小

字体大小的最佳实践

为根元素设置基础字体大小：通常设置为 16px，作为整个页面的基准
使用相对单位：优先使用 rem、em 等相对单位，便于响应式设计
建立字体大小层次结构：为不同级别的文本设置合理的字体大小
考虑可读性：确保字体大小适合阅读，通常正文文本不小于 14px
测试在不同设备上的显示效果：确保字体大小在不同屏幕尺寸上都能正常显示

代码示例

基本用法示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>font-size 属性基本用法</title>
  <style>
    /* 为根元素设置基础字体大小 */
    html {
      font-size: 16px;
    }
    
    /* 使用像素单位 */
    .px-size {
      font-size: 16px;
    }
    
    /* 使用 em 单位 */
    .em-size {
      font-size: 1.2em; /* 相对于父元素的字体大小 */
    }
    
    /* 使用 rem 单位 */
    .rem-size {
      font-size: 1.2rem; /* 相对于根元素的字体大小 */
    }
    
    /* 使用百分比 */
    .percent-size {
      font-size: 120%; /* 相对于父元素的字体大小 */
    }
    
    /* 使用视口单位 */
    .vw-size {
      font-size: 5vw; /* 相对于视口宽度的 5% */
    }
    
    /* 使用关键字 */
    .keyword-size {
      font-size: large;
    }
  </style>
</head>
<body>
  <h1>font-size 属性示例</h1>
  
  <h2>像素单位 (16px)</h2>
  <p class="px-size">这是使用像素单位设置的文本，字体大小为 16px。</p>
  
  <h2>em 单位 (1.2em)</h2>
  <p class="em-size">这是使用 em 单位设置的文本，字体大小为父元素的 1.2 倍。</p>
  
  <h2>rem 单位 (1.2rem)</h2>
  <p class="rem-size">这是使用 rem 单位设置的文本，字体大小为根元素的 1.2 倍。</p>
  
  <h2>百分比 (120%)</h2>
  <p class="percent-size">这是使用百分比设置的文本，字体大小为父元素的 120%。</p>
  
  <h2>视口单位 (5vw)</h2>
  <p class="vw-size">这是使用视口单位设置的文本，字体大小为视口宽度的 5%。</p>
  
  <h2>关键字 (large)</h2>
  <p class="keyword-size">这是使用关键字设置的文本，字体大小为 large。</p>
</body>
</html>

字体大小继承示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体大小继承示例</title>
  <style>
    /* 为根元素设置基础字体大小 */
    html {
      font-size: 16px;
    }
    
    /* 为父元素设置字体大小 */
    .parent {
      font-size: 18px;
    }
    
    /* 子元素继承父元素的字体大小 */
    .child {
      /* 没有设置 font-size，会继承父元素的 18px */
    }
    
    /* 孙子元素继承子元素的字体大小，并使用 em 单位 */
    .grandchild {
      font-size: 1.2em; /* 相对于父元素（.child）的字体大小，即 18px * 1.2 = 21.6px */
    }
    
    /* 使用 rem 单位，不受父元素影响 */
    .rem-child {
      font-size: 1.2rem; /* 相对于根元素的字体大小，即 16px * 1.2 = 19.2px */
    }
  </style>
</head>
<body>
  <h1>字体大小继承示例</h1>
  
  <div class="parent">
    <p>父元素的文本，字体大小为 18px。</p>
    
    <div class="child">
      <p>子元素的文本，继承父元素的字体大小，为 18px。</p>
      
      <div class="grandchild">
        <p>孙子元素的文本，使用 em 单位，字体大小为 21.6px（18px * 1.2）。</p>
      </div>
      
      <div class="rem-child">
        <p>使用 rem 单位的子元素，字体大小为 19.2px（16px * 1.2），不受父元素影响。</p>
      </div>
    </div>
  </div>
</body>
</html>

响应式字体大小示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式字体大小示例</title>
  <style>
    /* 为根元素设置基础字体大小 */
    html {
      font-size: 16px;
    }
    
    /* 使用媒体查询调整根元素字体大小 */
    @media (max-width: 768px) {
      html {
        font-size: 14px;
      }
    }
    
    @media (max-width: 480px) {
      html {
        font-size: 12px;
      }
    }
    
    /* 使用 rem 单位设置字体大小 */
    h1 {
      font-size: 2.5rem;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    h3 {
      font-size: 1.5rem;
    }
    
    p {
      font-size: 1rem;
    }
    
    /* 使用 clamp() 函数设置响应式字体大小 */
    .clamp-size {
      font-size: clamp(1rem, 2vw, 1.5rem);
    }
  </style>
</head>
<body>
  <h1>响应式字体大小示例</h1>
  
  <h2>标题层级示例</h2>
  <h3>三级标题</h3>
  <p>这是正文文本，使用 rem 单位设置字体大小。</p>
  
  <h2>使用 clamp() 函数的文本</h2>
  <p class="clamp-size">这是使用 clamp() 函数设置的响应式文本，字体大小会根据视口宽度自动调整，最小为 1rem，最大为 1.5rem。</p>
  
  <p>提示：尝试调整浏览器窗口大小，观察文本大小的变化。</p>
</body>
</html>

ASCII 示意图

字体大小单位对比示意图

+-------------------------+
| 字体大小单位             |
+-------------------------+
| 绝对单位                 |
|   - px (像素)            |
|     特点：固定大小        |
|     适用：需要精确控制的场景 |
+-------------------------+
|   - pt (点)              |
|     特点：印刷单位        |
|     适用：打印样式        |
+-------------------------+
| 相对单位                 |
|   - em                  |
|     特点：相对于父元素     |
|     适用：组件内部样式     |
+-------------------------+
|   - rem                 |
|     特点：相对于根元素     |
|     适用：整体布局         |
+-------------------------+
|   - %                   |
|     特点：相对于父元素     |
|     适用：需要百分比调整的场景 |
+-------------------------+
|   - vw/vh               |
|     特点：相对于视口        |
|     适用：响应式设计        |
+-------------------------+
|   - clamp()             |
|     特点：最小值-首选值-最大值 |
|     适用：响应式字体大小     |
+-------------------------+

字体大小继承示意图

+-------------------------+
| 字体大小继承             |
+-------------------------+
| html (根元素)            |
|   font-size: 16px        |
+-------------------------+
|   body                   |
|     继承 16px            |
+-------------------------+
|     .parent              |
|       font-size: 18px    |
+-------------------------+
|       .child             |
|         继承 18px        |
+-------------------------+
|         .grandchild      |
|           font-size: 1.2em |
|           计算: 18px * 1.2 = 21.6px |
+-------------------------+
|         .rem-child       |
|           font-size: 1.2rem |
|           计算: 16px * 1.2 = 19.2px |
+-------------------------+

常见问题与解决方案

问题 1：字体大小单位选择不当

症状：字体大小在不同设备或浏览器中显示不一致
解决方案：

对于整体布局，优先使用 rem 单位
对于组件内部样式，考虑使用 em 单位
对于响应式设计，考虑使用视口单位或 clamp() 函数
避免混合使用过多不同的单位

问题 2：字体大小继承导致的累积效应

症状：嵌套元素的字体大小越来越大或越来越小
解决方案：

对于需要避免继承影响的场景，使用 rem 单位
合理设置嵌套层级，避免过深的嵌套
为关键元素显式设置字体大小

问题 3：响应式字体大小设置不当

症状：在小屏幕设备上字体过小，在大屏幕设备上字体过大
解决方案：

使用媒体查询调整根元素的字体大小
使用 clamp() 函数设置响应式字体大小
测试在不同屏幕尺寸上的显示效果

问题 4：字体大小与行高不协调

症状：文本行间距过大或过小，影响可读性
解决方案：

为不同字体大小的文本设置合适的 line-height
考虑使用相对单位设置行高，如 line-height: 1.5

实战练习

练习 1：设置基本字体大小

为以下元素设置合适的字体大小：

页面标题（h1）：使用较大的字体大小
二级标题（h2）：使用中等大小的字体
正文文本（p）：使用适合阅读的字体大小
小文本（small）：使用较小的字体大小

练习 2：使用相对单位

创建一个组件，使用 em 单位设置内部元素的字体大小，确保：

组件标题的字体大小是组件基础字体大小的 1.5 倍
组件正文的字体大小与组件基础字体大小相同
组件说明文本的字体大小是组件基础字体大小的 0.8 倍

练习 3：响应式字体大小

使用以下方法设置响应式字体大小：

使用媒体查询调整根元素的字体大小
使用 rem 单位设置页面元素的字体大小
使用 clamp() 函数设置至少一个元素的字体大小
测试在不同屏幕尺寸上的显示效果

代码优化建议

为根元素设置基础字体大小：通常设置为 16px，作为整个页面的基准
优先使用相对单位：
- 使用 rem 单位设置整体布局的字体大小
- 使用 em 单位设置组件内部的字体大小
- 使用视口单位设置响应式字体大小
使用 clamp() 函数：对于响应式设计，考虑使用 clamp() 函数设置字体大小
建立字体大小系统：为不同级别的文本设置一致的字体大小比例
测试在不同设备上的显示效果：确保字体大小在不同屏幕尺寸上都能正常显示
考虑可读性：确保字体大小适合阅读，通常正文文本不小于 14px
避免过度使用绝对单位：减少 px 单位的使用，提高页面的可维护性

总结

font-size 属性是 CSS3 中用于设置元素字体大小的重要属性。通过合理设置 font-size 属性，我们可以：

改善页面的视觉层次：通过不同的字体大小创建清晰的视觉层次结构
提高文本的可读性：选择适合阅读的字体大小
实现响应式设计：使用相对单位和响应式技术确保在不同设备上的良好显示
提高代码的可维护性：使用相对单位和一致的字体大小系统

在实际开发中，应该：

理解不同字体大小单位的特点和应用场景
为根元素设置合理的基础字体大小
优先使用相对单位，特别是 rem 和 em
考虑使用 clamp() 函数等现代 CSS 特性实现响应式字体大小
测试在不同设备和浏览器中的显示效果
建立一致的字体大小系统，确保页面的视觉一致性

通过本教程的学习，你应该已经掌握了 font-size 属性的基本概念和使用方法，能够在实际项目中正确应用 font-size 属性设置字体大小。