CSS怎样快速设置Tailwind默认字体族_在fontFamily中配置优先顺序

应将自定义字体配置在 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 字体栈的视觉密度尽量贴近主字体。