CSS快速设置Tailwind默认字体族：fontFamily优先级配置

关于 Tailwind 字体配置，你可能忽略的几个关键点

在配置 Tailwind 字体时，许多开发者常纠结于自定义字体应该写在哪里。正确的做法是使用 theme.extend.fontFamily，而非直接覆盖 theme.fontFamily。直接覆盖会导致 Tailwind 自带的 sans、serif、mono 三个实用别名丢失。保留这些别名，既能灵活扩展，又能保证回退链完整，避免因配置不当导致字体渲染异常。

fontFamily 配置项的正确位置

在 tailwind.config.js 的 theme.extend.fontFamily 中添加自定义字体即可。错误做法是直接写入 theme.fontFamily，这样所有默认别名都会消失，包括 font-sans、font-serif 等 class 也会失效。正确做法是保留原有结构，只扩展或重写其中一项：

module.exports = {  theme: {    extend: {      fontFamily: {        sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'],      }    }  }}

为什么不能只写自定义字体名

很多新手误以为直接写 ['Inter'] 浏览器就能识别，实际上浏览器无法识别 Inter 这个名字，除非它已被预装或通过 @font-face 加载。只写一个名称相当于砍断了回退链，最终可能渲染为 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 字体栈的视觉密度应尽量贴近主字体，避免出现明显的尺寸跳动。