为什么Tailwind CSS自定义字体文件未加载该如何配置-css教程-PHP中文网

@font-face必须置于@tailwind base之前，路径需相对于CSS文件，font-family字符串须完全一致，配置应使用theme.extend.fontFamily新增而非覆盖。

为什么tailwind css自定义字体文件未加载该如何配置

字体不加载的首要原因，是 @font-face 没放在正确位置。Tailwind 的 @tailwind base 会重置 html 和 body 的 font-family，如果字体还没注册，后续所有继承都 fallback 到系统字体。

必须确保顺序严格为：

把 @font-face 写在 @tailwind utilities 后面、或塞进组件级 CSS（如 React 的 styled-components 或 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，地址就是你要修正的路径。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

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 解析失败

写 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