@font-face必须置于@tailwind base之前，路径需相对于CSS文件，font-family字符串须完全一致，配置应使用theme.extend.fontFamily新增而非覆盖。
font-face 声明位置错：必须在 @tailwind base 之前
字体不加载的首要原因，是 @font-face 没放在正确位置。Tailwind 的 @tailwind base 会重置 html 和 body 的 font-family，如果字体还没注册，后续所有继承都 fallback 到系统字体。
必须确保顺序严格为：
-
@font-face→ -
@tailwind base→ -
@tailwind components→ @tailwind utilities
把 @font-face 写在 @tailwind utilities 后面、或塞进组件级 CSS（如 React 的 styled-components 或 css 模块）里，浏览器根本不会识别该字体声明。
路径写错：相对 CSS 文件，不是项目根目录
字体文件路径是相对于当前 CSS 文件所在位置计算的，不是相对于 src/ 或 public/ 根目录。路径一错，Network 面板里就看不到字体请求，甚至没 404 —— 因为 PostCSS 在编译阶段就跳过了无效 url()。
立即学习“前端免费学习笔记（深入）”；
- 若 CSS 在
src/styles.css，字体在public/fonts/roboto.woff2，路径应为：url("../public/fonts/roboto.woff2") - 若 CSS 在
src/css/app.css，字体在src/assets/fonts/inter.woff2，路径应为：url("../../assets/fonts/inter.woff2") - Windows 下必须用正斜杠或双反斜杠，并加引号：
url("./fonts/roboto.woff2")，不能写url("C:\fonts\roboto.woff2")
最稳验证方式：打开 DevTools → Network → 过滤 woff2 或 ttf，看是否发起请求；若无请求，说明 @font-face 根本没执行；若有 404，地址就是你要修正的路径。
font-family 字符串不一致：大小写、引号、空格一个都不能差
Tailwind 不解析字体文件，它只把配置项原样拼进生成的 CSS。两端字符串字面量差一个字符，就完全匹配失败 —— 类名还在 HTML 里，但生成的 CSS 里压根没那条规则。
-
@font-face中写的是font-family: "robotoMono"，则tailwind.config.js中键名必须是robotoMono，不能是roboto-mono或RobotoMono - 含空格或连字符的字体名（如
"IBM Plex Sans"）必须在tailwind.config.js数组中用双引号包裹：'"IBM Plex Sans"'（单引号包双引号） - CSS 里用双引号、配置里用单引号（如
'robotoMono'）会导致 PostCSS 解析失败，该条目被静默跳过 - 中文字体名（如
"Noto Sans SC"）同样必须加双引号，否则编译后 CSS 解析失败
配置方式错误：直接覆盖 theme.fontFamily 会清空所有默认族
写 fontFamily: { robotoMono: [...] } 看似合理，实则危险 —— 它会完全替换 Tailwind 的初始 fontFamily 对象，导致 font-sans、font-serif、font-mono 全部失效。
- ✅ 正确做法：只用
theme.extend.fontFamily新增键，例如：extend: { fontFamily: { robotoMono: ['"robotoMono"', 'ui-monospace'] } } - ❌ 错误写法：
theme: { fontFamily: { robotoMono: [...] } }—— 这会丢掉所有内置字体族 - 键名只能含小写字母、数字、短横线；
robotoMono是合法的，roboto Mono或RobotoMono会生成无效类名 - 生成的类名就是
font-robotoMono，不是font-roboto或font-robotomono
最常被忽略的一点：即使字体文件已加载、Network 面板显示 200，只要 @font-face 和 tailwind.config.js 的字符串不完全一致，font-xxx 类就永远只是个空壳 —— 没有对应 CSS 规则，浏览器只能 fallback。
