自定义字体不生效主因是误用theme.fontFamily而非extend.fontFamily，导致默认font-sans等丢失；须用@font-face声明本地字体，键名须合法且统一单引号，路径用绝对URL并加font-display:swap。
自定义字体不生效，90% 是因为没用 extend.fontFamily，而是直接重写了 theme.fontFamily —— 这会导致 font-sans、font-serif 全部失效。
为什么直接写 theme.fontFamily 会丢掉默认字体
Tailwind 的默认字体族（sans、serif、mono）只在初始 theme 中定义。一旦你在配置里写成：
theme: {
fontFamily: {
sans: ['Inter', 'system-ui']
}
}
就等于完全替换了整个 fontFamily 对象，原生的 serif 和 mono 键彻底消失。浏览器渲染 时找不到定义，最终回退到系统默认字体，甚至可能触发未定义行为。
- 必须用
extend.fontFamily，不是theme.fontFamily - 扩展键名要小写、ASCII 字母/数字/短横线，比如
heading✅，'IBM Plex Sans'❌（含空格，Tailwind 忽略） - 扩展后，类名自动变成
font-heading，不是font-[heading]或font-Heading
如何正确声明并加载本地字体文件（如 .ttf）
@font-face 是硬性前置步骤，Tailwind 不生成它，只消费它。漏掉这步，哪怕配置全对，字体也只会“加载成功但不显示”。
-
font-family值（如"robotoMono"）必须和@font-face中的font-family完全一致（大小写、引号、下划线） - 路径是相对于 CSS 文件位置计算的，不是项目根目录；推荐把字体放
public/fonts/下，用绝对路径url('/fonts/robotoMono.ttf')避免歧义 - 务必加
font-display: swap，否则文字会白屏等待字体加载（FOIT） - 格式声明别省：写成
format("truetype")，不要只写url(...)
fontFamily 数组里每个字符串怎么写才安全
数组顺序 = 渲染优先级，但每一项的写法直接影响编译和运行时行为。
- 所有含空格、连字符、大小写的字体名必须用单引号包裹：
'Inter'、'Source Code Pro'、'Fira Code' - 系统字体别名也要加引号：
'-apple-system'、'BlinkMacSystemFont' - 末尾必须带通用族名：
'sans-serif'或'serif'，不能只写'system-ui'—— 某些旧版 Safari 会因此跳过整条栈 - 避免混用引号风格：不要写
["Inter", 'system-ui']，统一用单引号
为什么 font-[family-name] 类根本没生成
这不是浏览器问题，是 Tailwind 编译阶段就跳过了该键 —— 它只认合法标识符。
- 键名含空格、中文、点号、括号、下划线开头（如
_custom）都会被静默忽略 - 大小写敏感：
heading→font-heading，Heading→ 不生成任何类 - 检查编译后的 CSS 文件（如
dist/output.css），搜索font-heading看是否存在；不存在说明配置未被识别 - Vite / Next.js 等框架若启用了 JIT 模式，需确保使用了该类名的 HTML/JSX 文件在
content路径中被扫描到
最常被忽略的一点：Tailwind 从不加载字体文件，它只管生成 class。你看到字体没变，第一反应不该是改配置，而是打开 DevTools → Network 标签页，过滤 font，确认 @font-face 声明的 URL 是否真的发出了请求、状态码是否为 200。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
