如何在Tailwind CSS中配置自定义CSS字体库？-css教程-PHP中文网

font-sans类不生效是因为直接覆盖theme.fontfamily会清空默认字体配置，应使用extend.fontfamily；同时需确保@font-face或@import正确加载字体文件，并注意字体名大小写、引号及空格的一致性。

如何在tailwind css中配置自定义css字体库？

font-sans 类不生效，基本是因为你直接写了 theme.fontFamily 覆盖了默认配置——这会清空 font-serif、font-mono 等所有内置字体族，导致类名还在，但生成的 CSS 里根本没对应规则。

Tailwind v3 的 font-sans、font-serif、font-mono 是硬编码在初始 theme 里的工具类。一旦你在 theme.fontFamily 下直接写对象，就等于彻底替换整个字体配置，原生键全部丢失。

❌ 错误写法：fontFamily: { sans: ['Inter', 'sans-serif'] } → font-serif 立刻失效
✅ 正确写法：extend: { fontFamily: { sans: ['Inter', 'ui-sans-serif', 'sans-serif'] } }
如果你只是加新字体（比如 font-heading），同样走 extend.fontFamily，键名决定类名后缀

Tailwind 只输出 font-family 声明，不管字体文件从哪来。漏掉加载环节，font-sans 就永远卡在 fallback 上。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

Google Fonts 推荐放在 CSS 入口顶部，早于 @tailwind base：@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
本地字体必须用 @font-face 显式注册，路径相对于当前 CSS 文件；Windows 路径要用正斜杠或双反斜杠，并加引号：url("./fonts/Inter.woff2")
font-display: swap 强烈建议加上，避免 FOIT（空白文本阻塞）
检查 DevTools 的 Network 面板：如果没看到字体请求，说明 @font-face 或 @import 根本没执行

所有含空格或特殊字符的字体名（如 "PingFang SC"）必须用双引号包裹，且和 @font-face 中声明的 font-family 完全一致——大小写、引号、空格都得对上。

❌ ['PingFang SC'] → 解析失败，回退到系统默认
✅ ['"PingFang SC"'] 或 ["PingFang SC"]（JS 字符串内用双引号包裹字体名）
中文字体栈顺序不能乱：["-apple-system", "BlinkMacSystemFont", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "sans-serif"]
别用 "STHeiti"：iOS 13+ 已移除，会导致降级失败

Tailwind 不解析 CSS 自定义属性，var(--font-sans) 必须作为字符串出现在 fontFamily 数组里，且不能加引号包裹（否则会被当作文本字面量）。

❌ sans: ["var(--font-sans)"] → 生成 font-family: "var(--font-sans)"（带引号，无效）
✅ sans: ["var(--font-sans)", "system-ui", "sans-serif"] → 生成 font-family: var(--font-sans), system-ui, sans-serif
确保 :root 或 html 中已定义该变量，否则浏览器自动跳过，用下一个 fallback
变量值含空格时，CSS 里必须加引号：--font-sans: "Inter Variable";