font-xxx类不生效主因是@font-face与tailwind.config.js配置字符串不一致、顺序错误或覆盖默认字体族；须用theme.extend.fontfamily添加新键，@font-face须置于@tailwind base前且路径准确。
font-xxx 类不生效，基本不是字体文件或网络问题，而是 @font-face 和 tailwind.config.js 两头没对上——字符串字面量不一致、配置位置错、或直接覆盖了默认字体族。
必须用 theme.extend.fontFamily，别碰 theme.fontFamily
直接写 theme.fontFamily: { sans: [...] } 会清空整个默认结构：font-sans、font-serif、font-mono 全部失效。Tailwind 的这些基础类是硬编码在初始 theme 里的，替换就等于删除。
- ✅ 正确：只往
extend.fontFamily里加新键，比如heading→ 生成font-heading - ❌ 错误：写
theme: { fontFamily: { heading: [...] } }—— 这会丢掉所有默认键 - 修改后必须重启开发服务器，热更新不会读新配置
@font-face 必须在 @tailwind base 之前，且路径要算对
CSS 解析顺序决定字体能否被继承。@tailwind base 会重置根元素字体，如果字体还没注册，后续规则只能 fallback。
- ✅ 正确顺序：
@font-face→@tailwind base→@tailwind components→@tailwind utilities - ❌ 错误：把
@font-face放在组件级 CSS 或@layer utilities里，它根本不会被全局识别 - 路径是相对于当前 CSS 文件的，不是项目根目录。例如 CSS 在
src/styles.css，字体在public/fonts/roboto.woff2，就得写url("../public/fonts/roboto.woff2") - Windows 下路径要用正斜杠或双反斜杠，并加引号：
url("./fonts/roboto.woff2")
字体名大小写、引号、空格必须完全一致
Tailwind 不解析字体文件，它只把配置项原样转成 CSS 的 font-family 值。两端字符串字面量差一个字符，就匹配失败。
- 如果
@font-face写的是font-family: "robotoMono"，那配置里就得是robotoMono: ["robotoMono", "ui-monospace"] - 含空格的字体名（如
"Clash Display"）必须用单引号包裹：['"Clash Display"', "sans-serif"]，否则 PostCSS 解析失败 - 常见翻车点：
@font-face用双引号、配置用单引号；@font-face写roboto-mono，配置写robotoMono；大小写不统一
中文字体和 fallback 链不能省
中文字体建议前置，末尾必加通用备选，否则多语言混排时容易回退到不可控字体。
- 推荐写法：
["'PingFang SC'", "'Microsoft YaHei'", "sans-serif"] - 数组顺序 = 渲染优先级，第一个加载失败就跳第二个，不要混搭风格迥异的字体（如
["Roboto", "Georgia", "sans-serif"]） - 本地字体需手动
@font-face注册，Tailwind 不处理字体加载，只生成 class
font-heading 的声明——比对着文档猜快得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
