必须用theme.extend.fontFamily扩展字体，末尾必加通用族名（如'sans-serif'），否则font-sans等类失效并回退至Times New Roman；键名决定class名，@font-face与配置中字体名字面量须完全一致。
直接在 tailwind.config.js 的 theme.extend.fontFamily 中定义字体栈，末尾必须带通用族名（如 'sans-serif'），否则浏览器可能回退到 Times New Roman 或渲染异常——这不是警告，是实际发生过的故障现象。
fontFamily 必须用 extend，不能碰 theme.fontFamily
写 theme.fontFamily 会清空 Tailwind 原生的 sans、serif、mono 键，导致 font-sans 类生成的 CSS 规则为空。结果是：HTML 里写了 font-sans，DevTools 里却看不到 font-family 声明，文字静默 fallback 到系统默认字体。
- ✅ 正确位置：
theme: { extend: { fontFamily: { ... } } } - ❌ 错误位置：
theme: { fontFamily: { ... } }→ 所有默认字体类失效 - 新增自定义字体（如
heading）也走同一路径，键名决定类名后缀：font-heading
字体栈顺序和末尾通用族名不能错
浏览器按数组顺序尝试匹配字体，一旦某个字体不可用，就跳到下一个；但若整个栈没声明类型归属（如 'sans-serif'），某些旧版 Safari 或 Linux 浏览器会直接放弃渲染该规则，降级为 Times New Roman。
- 中文字体必须前置：
['"Noto Sans SC"', '"PingFang SC"', 'system-ui', 'sans-serif'] - 无衬线栈结尾必须是
'sans-serif'，不是'system-ui'或空着 - 衬线栈结尾必须是
'serif'，等宽栈结尾必须是'monospace' - 含空格的字体名（如
"IBM Plex Sans"）必须用双引号包裹：'"IBM Plex Sans"'
@font-face 和配置中的字体名必须字面量一致
Tailwind 不解析字体文件，只把配置项原样转成 CSS 的 font-family 值。如果 @font-face 里写的是 font-family: "robotoMono"，那配置里就必须是 robotoMono: ['"robotoMono"', 'ui-monospace', 'monospace'] —— 大小写、下划线、引号一个都不能差。
立即学习“前端免费学习笔记（深入）”；
- 常见失效原因：
@font-face写"Roboto Mono"，配置写robotoMono→ 不匹配 -
@font-face必须放在@tailwind base之前，否则被基础重置覆盖 - 本地字体路径需相对于 CSS 文件位置，Windows 下要用正斜杠或双反斜杠并加引号：
'"./fonts/Inter.woff2"' - 务必加
font-display: swap，否则 FOIT（空白文本阻塞）会导致首屏无文字
多语言/RTL 场景下别依赖响应式断点切字体
Tailwind 不支持 md:font-arabic 这类响应式字体类。多语言字体切换应靠逻辑属性 + 字体栈内部结构完成，比如中文环境用 font-chinese，阿拉伯语环境用 font-arabic，再配合 dir="rtl" 触发 rtl: 变体。
-
rtl:只响应dir="rtl"属性，不是 class 名；改document.documentElement.dir = 'rtl'就能批量激活所有rtl:ml-4类 - 不要同时用
dir="rtl"和class="rtl"，后者无意义且可能干扰插件 - 字体栈内可混用语言专用字体，例如：
['"Tajawal"', '"Segoe UI"', 'sans-serif']，但顺序仍需按系统真实可用性排列
最易被忽略的一点：改完 tailwind.config.js 后必须重启开发服务器，热更新不触发字体类重新生成；而 @font-face 若漏掉 format() 或 font-display，即使配置全对，也会在首屏出现不可逆的渲染断裂。
