字体不生效主因是@font-face与tailwind.config.js配置未对齐：路径、名称大小写、引号需完全一致；@font-face须置于@tailwind base前且在主css入口；config中必须用extend.fontfamily并确保键名与@font-face声明严格匹配。
字体不生效，八成是 @font-face 和 tailwind.config.js 两头没对上——不是路径错、就是名字大小写或引号不一致，Tailwind 本身根本不会报错，只默默用 fallback 字体顶上。
@font-face 必须放在 @tailwind base 之前
浏览器按 CSS 解析顺序加载字体：@font-face 必须出现在 @tailwind base 之前，否则 base 层的重置规则会干扰字体继承。它也必须写在项目主 CSS 入口（如 src/styles.css）里，不能塞进组件级样式或 @layer components 中。
- ✅ 正确顺序：
@font-face→@tailwind base→@tailwind components→@tailwind utilities - ❌ 错误做法：把
@font-face写在@tailwind utilities后面，或放在 React 组件的styled-components里 - 强烈建议加
font-display: swap，避免 FOIT（空白文本阻塞）
tailwind.config.js 中必须用 extend.fontFamily
直接写 theme.fontFamily 会清空 Tailwind 原生的 sans、serif、mono 定义，导致 font-sans 类彻底失效。只有 extend.fontFamily 是安全入口，它保留所有默认键名和 fallback 链。
- 键名决定 class 名：比如
robotoMono→font-robotoMono - 键名只能含小写字母、数字、短横线；
my-font→font-my-font，但My Font会被忽略 - 所有含空格或特殊字符的字体名（如
"Clash Display"）必须用单引号包裹，否则 PostCSS 解析失败
字体名必须完全一致（含引号、大小写、空格）
Tailwind 不解析字体文件，只把配置项原样转成 CSS 的 font-family 值。如果 @font-face 声明的是 font-family: "robotoMono"，那么 tailwind.config.js 中就必须写 robotoMono: ["robotoMono", ...]——大小写、下划线、引号一个都不能差。
- 常见错误现象：
font-robotoMono不生效，但网络面板看到字体已加载 → 键名或@font-face名不匹配 - 控制台报
Invalid property value→ 字体名含空格却没加引号，如['Fira Code']应为['"Fira Code"'] - Windows 下路径写成
C:\fonts\foo.woff2→ 必须用正斜杠或双反斜杠并加引号：["./fonts/foo.woff2"]
中文字体需前置，末尾必加通用备选
中文字体声明必须放在数组首位，且 fallback 链末尾必须包含 sans-serif、serif 或 monospace 等通用族名，否则浏览器可能回退到不可控系统字体。
- 例如：
heading: ['"Zilla Slab"', '"Noto Sans SC"', 'serif'] - 不要写成
heading: ['"Noto Sans SC"', '"Zilla Slab"']—— 中文会 fallback 到英文衬线体，显示异常 - 修改配置后必须重启开发服务器（
npm run dev或pnpm dev），热更新不触发 config 重载
最易被忽略的点：键名不是“你希望叫什么”，而是“@font-face 里写的字面量字符串”——它不经过任何转换，全靠手动对齐。哪怕多一个空格、少一对引号，font- 类就永远不会生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
