fontFamily 配置中数组顺序决定字体 fallback 优先级，第一项为主字体，后续为 fallback；必须用字符串数组，中文字体需前置，带空格字体名须加引号，sans-serif 必须置于末尾。
tailwind.config.js 里 fontFamily 配置数组顺序决定渲染优先级
字体族的 fallback 行为完全由 fontFamily 配置中数组项的书写顺序控制，不是靠 CSS 的 font-family 声明顺序或浏览器默认行为。Tailwind 会把数组第一项作为主字体，后续每一项都是 fallback，最终生成的 CSS 类（如 font-sans）里，font-family 值就是按这个顺序拼接的。
比如你希望中文优先用“PingFang SC”，英文用“Inter”，日文用“Hiragino Kaku Gothic Pro”，就得把它们按实际语言使用场景的覆盖优先级从左到右排好：
fontFamily: {
sans: [
'"PingFang SC"', // 中文 macOS 主字体
'"Hiragino Kaku Gothic Pro"', // 日文 macOS
'"Inter"', // 英文无衬线，跨平台兼容性好
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
],
},
不同语言区域需手动拆分 font stack，不能依赖自动检测
Tailwind 不解析内容语言，也不注入 lang 属性判断逻辑。它只负责生成静态 CSS 类。所以多语言支持必须靠你提前规划好字体栈的层级：哪些字体专用于简体中文，哪些保底给英文，哪些兜底给所有系统。
- 中文字体（如
"Noto Sans CJK SC"、"Microsoft YaHei"）要放在西文字体之前，否则中文字符可能被 Inter 或 Roboto 渲染成方块或异常字形 - 日/韩字体（如
"Hiragino Kaku Gothic Pro"、"Malgun Gothic"）建议紧随中文字体之后，避免被西文字体截断 - Windows 和 Linux 用户看不到 macOS 字体，所以
"Segoe UI"和Roboto要放在靠后但靠前的位置——太靠后会导致某些中文场景 fallback 到sans-serif，失去控制力 - 别把
sans-serif放在数组开头或中间；它必须是最后一项，否则会提前终止字体匹配
fontFamily 配置不支持对象语法，必须用字符串数组
你可能会看到社区里有人写 { 'zh-CN': '"Noto Sans CJK SC"', en: '"Inter"' } 这类结构，这在 Tailwind v3.x 及当前主流版本中完全无效。Tailwind 的 fontFamily 只接受字符串数组，不识别键名，也不会根据 lang 动态切换。
真正起作用的只有这一种写法：
theme: {
extend: {
fontFamily: {
sans: [
'"Noto Sans CJK SC"',
'"Inter"',
'system-ui',
'sans-serif',
],
},
},
},
如果需要按语言切换字体族，得配合 HTML 的 lang 属性 + 自定义 class 或 JS 控制，例如：
...
然后在 tailwind.config.js 里额外定义：
extend: {
fontFamily: {
zh: ['"Noto Sans CJK SC"', '"Inter"', 'system-ui', 'sans-serif'],
en: ['"Inter"', '"Noto Sans CJK SC"', 'system-ui', 'sans-serif'],
}
}
字体名带空格或短横线必须加引号，且引号类型要匹配
Tailwind 会原样输出数组里的字符串到 CSS 的 font-family 值中。所以任何含空格、短横线或特殊符号的字体名，都必须用双引号包裹，并且外部用单引号（或反之），否则生成的 CSS 会语法错误。
- ✅ 正确：
'"PingFang SC"'、'"Segoe UI"'、'"Noto Sans CJK SC"' - ❌ 错误：
"PingFang SC"（外部双引号 + 内部无引号 → 输出为PingFang SC，CSS 解析失败） - ❌ 错误：
"'PingFang SC'"（引号嵌套错乱，JS 报错） - ⚠️ 注意：
system-ui、sans-serif是通用字体族关键字，不加引号；而BlinkMacSystemFont虽无空格，但它是专有名称，也建议加引号以防意外
一个容易被忽略的点：字体加载完成前，浏览器会按栈顺序逐个尝试本地是否存在。顺序错了，中文页面可能先卡在 Inter 上几毫秒再 fallback，造成短暂的字体闪烁或布局偏移。这不是 Tailwind 的问题，但配置时得把它当真事来排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
