自定义字体名必须用单引号包裹，本地字体需先通过@font-face注册且名称严格一致，fontFamily数组顺序即渲染优先级，末尾须加通用族名，@layer中需嵌套于fonts下。
fontFamily 配置里加字体，必须用引号包裹自定义字体名
直接写 fontFamily: { sans: ['Inter', 'system-ui'] } 看似没问题，但一旦字体名含空格或连字符（比如 'Source Sans Pro'、'IBM Plex Sans'），不加引号就会被 PostCSS 解析成多个 token，最终编译失败或回退到默认字体。
实操建议：
- 所有自定义字体名统一用单引号包裹，包括系统字体别名（如
'-apple-system'） - 字体栈末尾务必补上通用族名：
'sans-serif'或'serif'，否则在某些浏览器中可能完全失效 - 避免在
fontFamily里写ui-sans-serif这类 Tailwind 内置别名——它只是占位符，不是真实字体名
本地字体需先 @font-face 注册，再进 fontFamily 配置
Tailwind 不会自动加载字体文件。只改 theme.fontFamily 只是告诉它“这个 CSS 类该用哪些字体”，但浏览器根本没见过那些字体文件，自然渲染成 fallback。
实操建议：
- 在
src/styles.css或全局 CSS 入口里，用标准@font-face声明字体，font-family名必须和fontFamily配置中的一致（注意引号和大小写） - 推荐用
font-display: swap，避免 FOIT；路径用相对路径或 CDN URL，别用../fonts/xxx.woff2这种易出错的写法 - 如果用 Vite / Webpack，确保字体文件被正确纳入构建流程（比如放在
public/下或配置 asset rule）
fontFamily 配置值是数组，顺序 = 渲染优先级
很多人以为写成 ['Inter', 'system-ui', 'sans-serif'] 就万事大吉，但实际渲染时：如果 Inter 加载失败、或者用户系统里没装 Inter、或者字体文件 404，浏览器就跳过它，试下一个。顺序错了，体验就断层。
实操建议：
- 把最想用的字体放最前，接着是同风格的系统字体（如
'-apple-system'、'BlinkMacSystemFont'），最后是通用族名 - 不要混搭风格迥异的字体，比如
['Roboto', 'Georgia', 'sans-serif']—— serif 和 sans-serif 在同一栈里，浏览器可能直接忽略 Georgia - 移动端特别注意：iOS 对
'system-ui'支持好，但 Android 旧版本可能识别不了，得靠'-apple-system'或'Segoe UI'补位
使用 @layer theme 时，fontFamily 必须嵌套在 fonts 下
有人照着文档写 @layer theme { fontFamily: { sans: [...] } }，结果 Tailwind 完全不认——因为 fontFamily 是 theme 的子键，不是顶层 key。
实操建议：
- 正确写法是：
@layer theme { fonts: { sans: [...] } } - 如果用的是
extend模式（即theme: { extend: { fontFamily: { ... } } }），那就不用@layer，直接写对象 - 检查
tailwind.config.js是否启用了content扫描，否则自定义字体类（如font-sans）可能被 PurgeCSS 删掉
Tailwind 的字体栈本质就是生成 CSS 的 font-family 值，它不关心字体是否真存在。真正容易被忽略的，是 @font-face 和 fontFamily 配置之间那层「名字必须严丝合缝」的契约——差一个空格、少一对引号、大小写不对，就白配了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
