字体不生效主因是@font-face与配置中字体名未严格一致：font-family值（含引号、大小写、空格）必须完全匹配，且v4需@font-face→@import→@theme顺序声明并带--font-前缀，v3则须用extend.fontFamily。
字体不生效，90% 是 @font-face 和 tailwind.config.js 里字体名没对上——不是路径错、也不是没编译，是两条链路完全断开，Tailwind 静默跳过，浏览器回退到系统字体。
如何写对 @font-face 声明
它必须出现在 CSS 入口文件（如 src/styles.css）中，且严格在 @tailwind base 之前；路径按 CSS 文件位置计算，不是按 HTML 或 JS。
-
font-family值是唯一接头点：比如写font-family: "Inter"，后续所有环节都得严格匹配这个字符串（含双引号、大小写、空格） - 字体名含空格（如
"Source Sans Pro"）必须加双引号，否则 PostCSS 解析失败，Tailwind 直接忽略该条目 - 必须加
font-display: swap，否则首屏可能空白（FOIT） - 本地字体推荐用
woff2格式，并显式声明format("woff2")，提升浏览器识别可靠性 - Windows 路径要用正斜杠或双反斜杠，且整个
url()必须加引号：url("./fonts/Inter.woff2")
为什么 font-inter 类根本没生成
Tailwind v4 不再读 tailwind.config.js 中的 fontFamily 配置，它只认 CSS 入口里的 @theme 规则；v3 及更早版本则相反——只认配置文件，不认 @theme。
- v4：必须用
@theme声明变量，且顺序固定：@font-face→@import 'tailwindcss'→@theme；缺一不可，顺序错 = 无效 - v4 的变量名必须带
--font-前缀：--font-inter: "Inter", sans-serif才能生成font-inter；写成--inter或--fonts-inter会被 Oxide 引擎直接忽略 - v3：必须用
theme.extend.fontFamily，不能直接写theme.fontFamily；否则会清空sans/serif/mono等默认键，导致font-sans失效 - v3 的键名决定类名后缀：
inter→font-inter，heading→font-heading；键名只能含小写字母、数字、短横线
字体栈顺序怎么排才不乱码
数组顺序 = fallback 优先级。中文显示异常（方块、乱码）往往不是字体没加载，而是中文字体排在了西文字体后面。
立即学习“前端免费学习笔记（深入）”；
- 简体中文优先示例：
['"Noto Sans CJK SC"', '"PingFang SC"', '"Inter"', 'system-ui', 'sans-serif'] - 所有含空格或特殊字符的字体名（如
"IBM Plex Sans"）必须用双引号包裹，且和@font-face中声明的font-family完全一致 - 末尾建议保留
sans-serif或serif等通用族，尤其对中文字体兼容性关键 - 不要把自定义字体直接塞进
sans数组顶替全部 fallback——应插在系统字体前，保留原有降级链，例如：sans: ['"Inter"', ...defaultTheme.fontFamily.sans]
常见错误现象与定位方法
控制台无报错、网络面板没请求、字体加载成功但不渲染——这类“假生效”最耗时间。别猜，直接查链路。
- 打开 DevTools Network 面板，过滤
font，看有没有 404；没有请求说明@font-face没执行（位置错或被注释） - 检查 Elements 面板，选中元素，看 Computed →
font-family值是否包含你写的字体名；如果显示Inter, sans-serif但文字仍是 Times New Roman，说明字体文件没加载成功 - 在控制台运行
document.fonts.check('12px "Inter"')，返回false表示字体未就绪（注意引号必须匹配） - v4 用户重点核对三处：CSS 文件里
@font-face的font-family字符串、@theme里的变量名、生成的类名是否全为font-inter（不是font-Inter或font-inter-regular）
最容易被忽略的是：v4 和 v3 的配置机制完全不兼容，混用就会静默失效；而字体名的引号、大小写、空格，在两头必须字面量一致——不是“看起来一样”，是字符串 === 相等。
