应将自定义字体配置在 theme.extend.fontFamily 中，如 sans: ['Inter', 'ui-sans-serif', ...]，保留系统字体栈以确保回退链完整；中文字体需加双引号并前置，fallback 需兼顾视觉密度防布局偏移。
fontFamily 配置项在哪写
在 tailwind.config.js 的 theme.extend.fontFamily 里加，不是 theme.fontFamily 直接覆盖——否则会丢掉 Tailwind 自带的 sans、serif、mono 等默认别名。
正确写法是保留原结构，只扩展或重写某一项：
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'],
}
}
}
}
为什么不能只写自定义字体名
浏览器不认 Inter 这种名字，除非它已预装或通过 @font-face 加载。只写 ['Inter'] 会导致回退链断裂，最终可能渲染成 Times New Roman 或其他意外字体。
必须保留完整的系统字体栈，常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 漏掉
ui-sans-serif（Safari / Firefox 的 UI 字体别名） - 把
-apple-system写成Apple System（错，会失效） - 把
sans-serif放最前（应放最后，作为兜底）
如何让 font-sans 生效且不破坏其他 class
font-sans 是 Tailwind 给 fontFamily.sans 对应的 class，它本身不带字体声明，只靠配置驱动。只要 fontFamily.sans 配对正确，font-sans 就自动生效。
注意两个关键点：
- 确保 HTML 根元素没用
style="font-family: ..."强制覆盖，否则 class 会被层叠压制 - 如果用了
@layer base手动重置body字体，要确认它用的是@apply font-sans，而不是硬编码字体值 - DevTools 里检查计算样式时，看
font-family值是否完整展开，而非只显示第一个字体名
中文字体优先级怎么设才靠谱
中文场景下，系统字体栈必须分层：先写具体中文字体（如 'PingFang SC'），再写泛用英文栈，最后是通用 fallback。顺序错了，Mac 上可能跳过苹方直接走 Helvetica，Windows 上可能跳过微软雅黑走 Arial。
推荐写法（含常见中文字体）：
fontFamily: {
sans: [
'"PingFang SC"',
'"Hiragino Sans GB"',
'"Microsoft YaHei"',
'"WenQuanYi Micro Hei"',
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif'
]
}
注意引号：中文字体名含空格，必须用双引号包裹；ui-sans-serif 和 sans-serif 不能省，它们是跨平台兼容锚点。
字体加载延迟时，浏览器会先用 fallback 渲染，等自定义字体就绪后重绘——这个过程不可见，但若 fallback 与目标字体宽高差异大，可能引发布局偏移（CLS）。所以 fallback 字体栈的视觉密度尽量贴近主字体。
