正确声明中文字体需按系统实际名称用引号包裹，如"Microsoft YaHei"；推荐sans栈为["-apple-system","BlinkMacSystemFont","PingFang SC","Microsoft YaHei","Noto Sans CJK SC","sans-serif"]；必须用@layer base在html上设font-family确保全局生效；慎用font-feature-settings，多数场景应关闭kern/liga/calt；优先系统字体fallback，避免远程字体阻塞。
如何在 Tailwind CSS v3 的 theme.fontFamily 中正确声明中文字体组
直接在 tailwind.config.js 的 theme.fontFamily 里写中文系统字体名是可行的，但必须按操作系统实际字体族名拼写，并用引号包裹含空格的名称。Windows 的 "Microsoft YaHei"、macOS 的 "PingFang SC"、Linux 的 "Noto Sans CJK SC" 都要原样保留，不能简写或省略引号。
常见错误是把 fontFamily.sans 写成 ["-apple-system", "Helvetica", "sans-serif"] 这类纯西文字体栈，导致中文 fallback 到丑陋的 SimSun 或方块乱码；或者漏掉中文专用字体，让浏览器退到不带 hinting 的位图字体。
- 推荐写法：
sans: ["-apple-system", "BlinkMacSystemFont", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "sans-serif"] - 不要把
"Hiragino Sans GB"放在"Microsoft YaHei"前面——它只存在于旧版 macOS，现代系统已弃用 - 避免使用
"STHeiti"：iOS 13+ 已移除该字体，会触发降级失败 - 若项目需支持古籍/繁体场景，可额外追加
"Noto Serif CJK TC"（繁体）或"Noto Serif CJK HK"（港标），但仅限fontFamily.serif分支
为什么 @layer base 中重置 html 的 font-family 比只配 theme.fontFamily 更可靠
Tailwind 默认不给 html 或 body 设置字体，仅靠 text-base 等工具类生效，这会导致未加类的元素（比如 <div>纯文本</div>）走浏览器默认字体，中文显示不可控。
必须用 @layer base 主动接管根级字体声明，才能确保所有内容继承一致的中文字体栈。
立即学习“前端免费学习笔记（深入）”；
- 在
src/styles.css（或主 CSS 入口）中写：@layer base { html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; } } -
ui-sans-serif是 Tailwind v3 新增的字体族别名，对应其内置的中文字体栈，但仅在theme.fontFamily定义后才生效，所以仍需配合@layer base - 不要用
body { font-family: ... }：移动端 Safari 对body字体继承有 bug，html才是真正根节点
遇到中文标点挤压、字距不均时，该开还是关 font-feature-settings
中文字体本身不依赖 OpenType 特性，但部分字体（如 "Noto Sans CJK"）启用了 cv05（中文标点挤压）、ss03（直角引号）等特性后，反而会让 Web 渲染错乱——特别是 Chrome 115+ 对 font-feature-settings 的解析更严格。
- 绝大多数中文字体场景应显式关闭干扰特性：
font-feature-settings: "kern" 0, "liga" 0, "calt" 0; - 仅当使用支持「竖排优化」的专业字体（如
"Source Han Serif"）且明确需要横排标点压缩时，才开启"cv05"，并加!important强制优先级 - 切勿全局启用
"salt"（随机字形）或"ss01"（旧字形）：它们在中文语境下无意义，还拖慢渲染
部署时发现字体加载慢？别碰 @font-face，优先检查系统字体 fallback 顺序
Tailwind v3 的中文字体方案本质是「系统字体优先」，不是 Web Font。所谓“字体加载慢”，90% 是因为配置里混入了远程字体（如 "Inter" 或 "Roboto"）作为首项，导致浏览器卡在 DNS 查询或 CORS 失败上，连本地中文字体都不走了。
- 打开 DevTools → Elements → 计算样式，看
font-family实际解析结果，确认是否真的 fallback 到了"Microsoft YaHei"而非"Inter" - 如果用了自托管字体，确保
@font-face的font-display: swap已设置，且src中文路径不含空格或特殊字符（如fonts/NotoSansCJKsc-Regular.woff2合法，fonts/思源黑体-Regular.woff2可能因编码问题失效） - CI/CD 构建时若用 PostCSS 插件自动压缩 CSS，注意它可能误删
"PingFang SC"中的空格——加/* prettier-ignore */注释保活
中文字体配置最麻烦的从来不是写几行代码，而是不同系统间字体名大小写、空格、存在性完全不一致；一个配置在 macOS 上完美，在 Windows Server 上可能直接回退到 SimSun。每次改完务必真机测试，别信模拟器。
