中文字体回退栈生成

工具说明

中文网页的字体问题几乎都出在字体栈上。各操作系统的中文字体并不通用：苹果的苹方、Windows 的微软雅黑、Android 的思源黑体彼此不共享，而字体名写错一个字符就会静默失效，浏览器只能回退到默认字体。本工具按平台与优先方向生成一条顺序正确的字体栈，并说明它在各平台上的实际效果。

三种优先方向该选哪个

• 中文优先：把中文字体放在最前面。适合以中文为主的内容站。缺点是中文字体内自带的西文字形通常不是最优，英文会显得略宽。
• 西文优先：把系统 UI 字体与西文字体放前面、中文字体放后面。由于中文字体里也包含西文字形，而西文字体不含汉字，浏览器会按字符分别取用，最终呈现「西文用西文字体、中文用中文字体」的效果。适合中英混排的技术文档。
• 等宽代码：适合代码块与表格数字对齐，西文用等宽字体，中文回退到无衬线字体。

各平台常见中文字体

• macOS 与 iOS：苹方（PingFang SC）；较旧系统为冬青黑体。
• Windows：微软雅黑（Microsoft YaHei）；宋体为衬线体。
• Android 与 ChromeOS：思源黑体（Noto Sans CJK SC），随系统内置。
• Linux：文泉驿微米黑，但并非所有发行版默认安装。

三个容易踩的坑

• 含空格的字体名必须加引号。写成 font-family: Microsoft YaHei, sans-serif 会被解析成两个字体名，最终两个都找不到，直接回退。正确写法是 “Microsoft YaHei”。
• 不要写 font-weight 或 Bold 后缀。字重由独立的 font-weight 属性控制，把它塞进字体名会让整个声明失效。
• 体积方面：苹方约 12MB、微软雅黑约 10MB，思源黑体全量 8 到 15MB。这些都是系统字体，引用不产生下载；但若用 @font-face 自托管，务必做子集化，否则单页就要多下十几兆。

你可能还想问

为什么我在 CSS 里写了微软雅黑，Mac 用户看到的还是苹方？

因为微软雅黑不在 Mac 上，浏览器按顺序继续往后找，最终落到后面的中文字体或系统默认。这其实是字体栈的正常工作方式——你写的那一行并不是「指定唯一字体」，而是「按顺序尝试」。所以正确做法是把苹果与 Windows 的中文字体都写进去，让各平台各取所需。

用 @font-face 自托管中文字体合适吗？

大多数情况下不合适。中文字体全量文件通常有十几兆，远超网页可接受的加载体积。除非做子集化——只保留页面实际用到的字符，能把体积压到几百 KB。更稳妥的默认做法是使用系统字体。另外要注意版权：用 font-family 引用系统字体不涉及授权问题，但把字体文件下载后自托管、或把带该字体的页面截图用于宣传，都可能需要字库授权。

中英混排时字重看起来不统一怎么办？

这是字体各自的字重档位不同导致的。英文字体可能只提供常规与粗体两档，而中文字体提供多档。当你设置一个中间字重（例如 500）时，英文字体因为找不到 500，会向上取到粗体，于是西文看起来比中文更粗。解决办法是选择字重档位较全的字体组合，或把字重设置为两端（400 或 700）以避免自动映射。

等宽字体栈为什么要单独处理？

因为代码与对齐数字需要真正等宽的西文字形，而中文字体自带的西文通常不是等宽的。所以等宽字体栈要把等宽西文字体放在前面（例如 Consolas、Menlo、Monaco），中文再回退到无衬线字体。还要注意：等宽字体下的行高与字距需要单独调，否则中文与西文的基线会不齐。

相关工具

相关内容