字体不生效主因是@font-face与tailwind.config.js中字体名不一致或顺序/路径错误：需确保@font-face在@tailwind base前、路径相对正确、font-family字符串完全匹配（含引号大小写）、配置用extend而非覆盖，并添加font-display:swap及通用字体族。
字体不生效，八成是 @font-face 和 tailwind.config.js 两头没对上——不是路径错、就是名字大小写或引号不一致，Tailwind 本身根本不会报错，只默默用 fallback 字体顶上。
确保 @font-face 声明在 @tailwind base 之前且位置正确
浏览器加载字体依赖 CSS 解析顺序：@font-face 必须出现在 @tailwind base 之前，否则 base 层的重置规则会干扰字体继承。它也必须放在项目主 CSS 入口（如 src/styles.css 或 app.css）里，不能塞进组件级 CSS 或 @layer components 中。
- ✅ 正确顺序：
@font-face→@tailwind base→@tailwind components→@tailwind utilities - ❌ 错误做法：把
@font-face写在@tailwind utilities后面，或放在 React 组件的styled-components里 - 路径必须相对 CSS 文件本身：比如 CSS 在
src/styles.css，字体在public/fonts/roboto.woff2，就得写url("../public/fonts/roboto.woff2")；用开发者工具 Network 面板看 404 请求地址，比猜路径快得多
font-family 名称必须严格一致（含引号、大小写、空格）
@font-face 里的 font-family 值和 tailwind.config.js 中 fontFamily 配置项用的键名，是两条独立链路的“接头点”。它们不自动关联，全靠你手动保证完全一致。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
@font-face中写的是font-family: "Zilla Slab"，那配置里就必须用'Zilla Slab'（单引号包裹，大小写、空格一个都不能少） - 如果字体名含空格或连字符（如
"Source Sans Pro"），不加引号会导致 PostCSS 解析失败，Tailwind 编译时可能静默跳过该条目 - 常见翻车点：CSS 里写
"roboto-mono"，配置里写robotoMono；或者 CSS 用双引号、配置用单引号——浏览器认的是字符串字面量，不是“差不多”
tailwind.config.js 中只 extend，别覆盖默认 fontFamily
Tailwind 的 fontFamily 是预设结构，直接重写 theme.fontFamily 会丢掉 sans、serif、mono 这些基础族，导致 font-sans 等内置类失效。必须用 extend 往里加新键，而不是替换整个对象。
- ✅ 正确写法：
extend: { fontFamily: { heading: ['"Zilla Slab"', 'serif'] } } - ❌ 错误写法：
fontFamily: { heading: ['"Zilla Slab"', 'serif'] }（这会清空所有默认字体族） - 数组末尾务必补通用族名：
'serif'或'sans-serif'，否则某些旧版 Safari 可能完全不渲染文字 - 不要把内置别名（如
ui-sans-serif）当真实字体名塞进数组——它只是 Tailwind 内部占位符，浏览器不认识
本地字体需主动声明 font-display，否则首屏文字可能闪退
Tailwind 不管字体加载策略，但你得自己在 @font-face 里加 font-display: swap。否则浏览器默认行为是 FOIT（Flash of Invisible Text），用户看到空白几秒再突然弹出文字，体验极差。
-
font-display: swap是目前最稳妥的选择：先用 fallback 渲染，等自定义字体加载完立刻切换，有 FOUT（Flash of Unstyled Text）但可接受 - 别漏掉
font-weight和font-style：同一个font-family名可对应多个@font-face块（比如font-weight: 400和700），Tailwind 的font-bold才能正确匹配到粗体文件 - WOFF2 格式优先，再 fallback 到 WOFF/TTF；单个
@font-face块里可用逗号分隔多个src，浏览器自动选最优格式
最容易被忽略的其实是「字体名一致性」——它不像 JS 报错那样显眼，而是在控制台完全安静的情况下，让你反复检查路径、缓存、构建配置，最后发现只是 CSS 里写的是 "Fira Code"，而配置里用了 FiraCode。多花十秒核对这两处字符串，比重跑三遍构建省事得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
