24. 字体族与字体大小

本节目标：理解 Tailwind 的三种字体族体系，掌握从 text-xs 到 text-9xl 的尺寸梯度，能为不同场景选择合适的字体和大小。

字体选对了，页面气质就定了一半。Tailwind 提供了开箱即用的字体族和一套精心设计的字号梯度，够你应付大多数场景。

font-family：字体族

Tailwind 默认提供三种字体族（font family），每种都是一个字体堆栈（font stack），回退到系统字体：

font-sans：无衬线字体

<p class="font-sans">现代简洁的无衬线字体</p>

字体堆栈大致是：Inter、system-ui、-apple-system……以及其他系统无衬线字体。

无衬线字体干净、现代，是 UI 界面的主力。按钮、导航、正文、标题都适用。

font-serif：衬线字体

<p class="font-serif">优雅传统的衬线字体</p>

衬线字体在笔画末端有装饰性的小线条，看起来更传统、正式。适合长篇文章、文学类网站、品牌标题。

font-mono：等宽字体

<pre class="font-mono">const code = "每字符等宽";</pre>

每个字符宽度相同，专门用于代码展示。另外，显示数字数据时用等宽字体更容易对齐阅读。

Tip

我不建议全局用 serif 做正文——中文字体下 serif 和 sans 区别不大，但英文字体下 serif 在屏幕上可能不如 sans 清晰。做英文站时慎用。

自定义字体

v4 的 CSS-first 配置用 @theme 定义自定义字体：

@import "tailwindcss";

@theme {
  --font-display: "Poppins", "system-ui", sans-serif;
  --font-body: "Noto Sans SC", "system-ui", sans-serif;
}

定义后用 font-display 和 font-body 即可。

<h1 class="font-display">品牌标题</h1>
<p class="font-body">正文内容</p>

Note

这是 v4 写法。v3 是在 tailwind.config.js 的 theme.extend.fontFamily 里配置。如果你还在维护 v3 项目，语法不一样——但概念一样。

font-size：字体大小

Tailwind 的字号从 text-xs 到 text-9xl，每个都绑定了字号和行高：

类名	字号	行高	常见用途
`text-xs`	0.75rem (12px)	1rem	注释、标签、法律声明
`text-sm`	0.875rem (14px)	1.25rem	辅助文本、次要信息
`text-base`	1rem (16px)	1.5rem	正文（默认）
`text-lg`	1.125rem (18px)	1.75rem	强调段落
`text-xl`	1.25rem (20px)	1.75rem	小标题
`text-2xl`	1.5rem (24px)	2rem	次级标题
`text-3xl`	1.875rem (30px)	2.25rem	主要标题
`text-4xl`	2.25rem (36px)	2.5rem	大标题
`text-5xl`	3rem (48px)	1	英雄区域标题
`text-6xl`	3.75rem (60px)	1	超大展示文本
`text-7xl`	4.5rem (72px)	1	特大标题
`text-8xl`	6rem (96px)	1	展示级文本
`text-9xl`	8rem (128px)	1	最大展示文本

注意从 text-5xl 开始行高变成 1，因为大标题通常是单行的。

<h1 class="text-4xl font-bold">页面大标题</h1>
<h2 class="text-2xl font-semibold">次级标题</h2>
<p class="text-base">正文内容，使用默认大小。</p>
<p class="text-sm text-gray-500">辅助说明文字。</p>

Tip

我的习惯是：正文用 text-base 或 text-sm，文章正文用 text-lg。标题层级用 text-2xl → text-4xl。别跳太多层级，保持节奏感。

响应式字号

字号搭配响应式前缀，不同屏幕不同大小：

<h1 class="text-2xl md:text-3xl lg:text-4xl">
  我会在手机上小一些，桌面上大一些
</h1>

Tailwind 的响应式字号会自动覆盖行高，不需要额外调整。

font-weight：字体粗细

字号说完了，顺便说下字重（font weight），因为它常和字号一起用：

类名	值
`font-thin`	100
`font-extralight`	200
`font-light`	300
`font-normal`	400
`font-medium`	500
`font-semibold`	600
`font-bold`	700
`font-extrabold`	800
`font-black`	900

<h1 class="text-4xl font-bold">粗体标题</h1>
<p class="text-base font-normal">正常粗细的正文</p>
<span class="text-sm font-medium text-gray-600">中等粗细的标签</span>

Warning

字重生效的前提是你的字体文件包含对应的粗细变体。比如你只引入了 400 和 700 的 Inter，那 font-light（300）就不会生效，浏览器会模拟一个细体，效果很差。

文字颜色

字号和字重配合颜色，构成完整的文字样式：

<h1 class="text-3xl font-bold text-gray-900">主标题</h1>
<p class="text-base text-gray-600">正文段落</p>
<p class="text-sm text-gray-400">次要信息</p>

颜色部分在第 29 章「颜色系统」会详细展开。

实际应用：文章排版

<article class="prose max-w-2xl mx-auto">
  <h1 class="text-3xl font-bold text-gray-900 mb-4">
    文章标题
  </h1>
  <p class="text-sm text-gray-500 mb-6">2026-07-29 · 码上学</p>
  
  <p class="text-lg text-gray-700 leading-relaxed mb-4">
    这是文章的开头段落，稍大一些的字号让读者更容易进入阅读状态...
  </p>
  
  <h2 class="text-2xl font-semibold text-gray-800 mt-8 mb-3">
    小标题
  </h2>
  
  <p class="text-base text-gray-700 leading-relaxed mb-4">
    正文段落，使用标准字号。适当的行高和字间距确保阅读舒适度...
  </p>
</article>

建立字号层级

在项目开始时定义一套字号层级，后续保持一致：

页面大标题 → text-4xl + font-bold
区块标题 → text-2xl + font-semibold
小节标题 → text-xl + font-medium
正文 → text-base
辅助文本 → text-sm
最小文本 → text-xs

这个层级不是死的，根据你的设计调整。但定了就别随意改，一致性是专业感的来源。

本节小结

font-sans / font-serif / font-mono → 三种字体族
text-xs 到 text-9xl → 字号梯度
font-thin 到 font-black → 字重控制
定义字号层级，保持一致性
字号 + 字重 + 颜色 = 完整文字样式