font-family类不生效主因是@font-face与tailwind.config.js中字体名字符串不一致、@font-face未置于@tailwind base之前、或直接覆盖theme.fontfamily导致默认字体族丢失，须用extend且严格匹配大小写、引号及路径。
font-family 类不生效，基本不是字体文件或网络问题，而是 @font-face 和 tailwind.config.js 两头没对上——字符串字面量不一致、配置位置错、或直接覆盖了默认字体族。
必须用 theme.extend.fontFamily，别碰 theme.fontFamily
直接写 theme.fontFamily: { sans: [] } 会清空整个默认结构：font-sans、font-serif、font-mono 全部失效。Tailwind 的这些基础类是硬编码在初始 theme 里的，替换就等于删除。
- ✅ 正确：只往
extend.fontFamily里加新键，比如heading→ 生成font-heading - ❌ 错误：写
theme: { fontFamily: { heading: [] } }—— 这会丢掉所有默认键 - 键名只能含小写字母、数字、短横线；
"IBM Plex Sans"这类含空格的会被 Tailwind 忽略
@font-face 必须在 @tailwind base 之前，且路径准确
CSS 解析顺序决定字体能否被继承。@tailwind base 会重置根元素字体，如果字体还没注册，后续规则只能 fallback。
- ✅ 正确顺序：
@font-face→@tailwind base→@tailwind components→@tailwind utilities - ❌ 错误：把
@font-face放在组件级 CSS 或@layer utilities里，它根本不会被全局识别 - 路径是相对于当前 CSS 文件的，不是项目根目录。例如 CSS 在
src/styles.css，字体在public/fonts/roboto.woff2，就得写url("../public/fonts/roboto.woff2") - Windows 下路径要用正斜杠或双反斜杠，并加引号：
url("./fonts/roboto.woff2")
字体名大小写、引号、空格必须完全一致
Tailwind 不解析字体文件，它只把配置项原样转成 CSS 的 font-family 值。两端字符串字面量差一个字符，就匹配失败。
- 如果
@font-face写的是font-family: "robotoMono"，那配置里就得是robotoMono: ["robotoMono", "ui-monospace"] - 中文字体名必须加双引号：
'"Noto Sans SC"'，否则编译后 CSS 解析失败 - 常见翻车点：CSS 里写
"roboto-mono"，配置里写robotoMono；或者 CSS 用双引号、配置用单引号
中文字体要前置，末尾必加通用备选
字体栈顺序决定 fallback 行为。中文排版要把中文字体放最前，比如 ['"Noto Sans SC"', 'system-ui', 'sans-serif']。末尾不加 sans-serif 或 serif，可能导致某些系统下渲染异常。
- RTL 布局靠
dir="rtl"触发，不是靠 class 切换；rtl:font-arabic这类规则只响应 HTML 属性，不响应自定义 class - 不要混用
md:font-heading和font-chinese—— Tailwind 不支持在字体族上做响应式映射，这类组合无效 - 修改配置后必须重启开发服务器，热更新不会读新配置
真正麻烦的从来不是写对 @font-face 或配好 extend.fontFamily，而是字体名大小写和引号是否完全一致、@font-face 是否真的在 @tailwind base 之前、以及中文字体是否被正确前置并带通用备选——这三个点漏掉任何一个，font-xxx 就静默失效，连控制台都不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
