CSS 字体大小 font-size：px、rem、em 与关键字

如何在 CSS 中设置字体大小

font-size 属性设置文字的大小。把它加在任意元素上，元素内部的所有文字都会继承这个大小，除非某个子元素设置了自己的大小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

要在 HTML 中修改字体大小，用的仍然是 CSS。添加一个 style 属性（<p style="font-size: 20px;">），或者在样式表里写一条规则。上世纪 90 年代的 <font size="5"> 标签已经废弃，在现代网页中没有它的位置。

font-size 支持的单位

输入一个值，看看浏览器计算出的大小：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

试试 20px、2em、150%、x-large、smaller 和 5vw。无效的值（比如 big）会被忽略，文字保持上一个有效的大小。

rem 与 em：容易踩坑的区别

rem 始终参照根元素，所以 1.2rem 无论出现在哪里大小都一样。em 参照父元素，所以元素嵌套时大小会相乘：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

最内层的 em 方块是 16 × 1.2 × 1.2 × 1.2 = 27.648px，最内层的 rem 方块仍然是 19.2px。这种叠加对于各部分需要一起缩放的组件很有用，在其他地方则常常让人意外。单位一页对比了所有长度单位。

关键字：从 xx-small 到 xx-large

绝对关键字对应一套以 medium 为中心的固定字号，medium 等于用户的默认字号（如果没改过就是 16px）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

在默认 16px 下，small 是 13px，large 是 18px，x-large 是 24px，xx-large 是 32px。关键字适合快速使用，但设计系统通常会用 rem 定义自己的一套字号。

用 clamp() 实现流式字体大小

想让标题随屏幕变大，但又不能太小或太大，只需一个 clamp() 调用：最小值、一个可缩放的理想值，以及最大值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

在 800px 宽的预览中，5vw 是 40px，介于 24px 和 48px 之间，所以取这个值。clamp 一页会深入讲解流式字体。

给整个页面设置基准字号

在 body（或 html）上设置一次字号，其余所有大小都相对于它来设置：

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

除非页面上的每个大小都用 rem 设置，否则不要用 html { font-size: 62.5%; } 这类技巧；也绝不要在 html 上设置固定的 px 字号：它会覆盖读者在浏览器里选择的字号，而有些人要靠这个设置才能看清文字。

无障碍注意事项

• 屏幕阅读时，正文字号至少 16px 是一个不错的下限。
• 用 rem 和 em 设置的大小会跟随用户的默认字号设置；用 px 设置的大小会跟随页面缩放，但不跟随这个设置。
• 在 iPhone 上，当你聚焦一个字号小于 16px 的输入框时，Safari 会放大页面。给表单字段设置 font-size: 1rem 或更大即可避免。

常见错误

• 使用 <font> 标签。 它已经废弃，请用 font-size 属性。
• 嵌套的 em 字号越变越大或越变越小，失去控制。 除非你需要叠加效果，否则用 rem。
• 在 html 上设置固定的 px 字号。 它会覆盖读者自己的字号设置。
• 忘了标题本来就有大小。 <h1> 默认是 2em，所以如果想让它和正文一样大，就需要 h1 { font-size: 1em; }。
• 只用视口单位。 font-size: 3vw 在手机上小得看不清，在宽屏显示器上又大得夸张。把它包进 clamp() 里。