必须用extend.fontfamily扩展而非覆盖theme.fontfamily，否则会清空sans/serif/mono导致font-sans失效；键名决定class名（如heading→font-heading），@font-face与配置中字体名须完全一致（含引号、大小写、空格），中文字体需前置，末尾必加sans-serif等通用备选。
fontFamily 配置必须用 extend，不能直接写 theme.fontFamily
直接修改 theme.fontFamily 会清空 Tailwind 原生的 sans、serif、mono 定义，导致 font-sans 类彻底失效——浏览器渲染时找不到对应字体族，回退到系统默认（甚至可能触发未定义行为）。
正确做法是只扩展现有结构：
-
extend.fontFamily是唯一安全入口，保留所有默认键名和 fallback 链 - 键名决定最终 class 名：
heading→font-heading，robotoMono→font-robotoMono - 键名只能含小写字母、数字、短横线；
'IBM Plex Sans'这类含空格的会被 Tailwind 忽略
@font-face 和配置中的字体名必须完全一致
Tailwind 不解析字体文件，只把配置项原样转成 CSS 的 font-family 值。如果 @font-face 声明的是 font-family: "robotoMono"，那么 tailwind.config.js 中就必须写 robotoMono: ["robotoMono", ...]——大小写、下划线、引号一个都不能差。
常见错误现象：
-
font-robotoMono不生效，但网络面板看到字体已加载 → 键名或@font-face名不匹配 - 控制台报
Invalid property value→ 字体名含空格却没加引号，如['Fira Code']应为['"Fira Code"'] - Windows 下路径写成
C:\fonts\foo.woff2→ 必须用正斜杠或双反斜杠并加引号：['"./fonts/foo.woff2"']
字体栈顺序决定多语言渲染效果
数组顺序 = fallback 优先级。中文显示异常（方块、乱码）往往不是字体没加载，而是中文字体排在了西文字体后面。
正确顺序示例（简体中文优先）：
sans: [ '"PingFang SC"', '"Noto Sans CJK SC"', '"Inter"', 'system-ui', '-apple-system', 'sans-serif' ]
关键点：
- 中文字体必须前置，否则 Inter/Roboto 会尝试渲染中文字符，结果是方块
- 日/韩字体建议紧随中文字体之后，避免被西文字体截断
-
sans-serif必须放在末尾；放在中间会导致浏览器提前终止匹配 - 不要用对象语法（如
{ zh: '"Noto Sans CJK SC"' }），Tailwind 只认字符串数组
本地字体需手动声明 @font-face，且必须早于 @tailwind base
Tailwind 不生成 @font-face 规则，只消费它。漏掉这步，哪怕配置全对，字体也“加载成功但不显示”。
实操要点：
-
@font-face必须写在 CSS 入口文件顶部，且在@tailwind base之前（base 层会重置字体） - 务必加
font-display: swap，避免 FOIT（空白文本阻塞） -
src路径需相对于当前 CSS 文件位置计算；../fonts/xxx.woff2比./fonts/xxx.woff2更易出错 - 推荐优先使用
.woff2格式，并显式声明format("woff2")
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
