网页中文字体加载：子集化、font-display 与回退栈

中文网页最容易出现的排版事故不是"字体不好看"，而是"字没加载出来，页面先变形了"。一个 5MB 的字体包，在移动网络下往往要等好几秒。

先承认现实：中文全字库必然大

常用汉字 6000 多个，一套完整的思源黑体动辄 10MB 以上。指望整包加载是不现实的，可行路径只有三条：子集化、按需分片、只用系统字体。

子集化是首选

如果页面文字是固定的（标题、按钮、标语、品牌名），只保留用到的字符，体积能从 10MB 降到几十 KB。工具链上有 fonttools 的 subset 命令，指定一个字符集文件即可：

pyftsubset SourceHanSans.otf --text-file=chars.txt --flavor=woff2

代价是动态内容（用户评论、文章正文）不能用子集字体，否则缺字会回退成方框。所以正确做法是"标题与品牌字用子集，正文用系统字体"。

font-display 别用默认值

默认的 auto 在慢网络下会有长达三秒的空白文字期。用 font-display: swap 先显示回退字体，字体到了再换，视觉上更稳；如果品牌字必须保持字形，用 optional 更合适——加载不到就不换，避免二次跳变。

回退栈要按字形特征排

中文回退栈的写法有讲究：font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif; 把苹果、Windows、安卓三端的系统字体依次列上，再做最后的兜底。顺序错了会出现"同一份 CSS 在手机上显示宋体"的情况。

一个常被忽略的细节

中文字体的字重（weight）在部分系统字体上只有 regular 和 bold，直接写 500 会触发浏览器合成加粗，字边缘发虚。要么用真实存在的字重，要么用变量字体。检查方式是放大截图看笔画边缘，合成加粗的横竖会明显偏粗且不匀。

本文首发于 izzsj.com，作者保留全部权利。未经书面授权，禁止任何形式采集、转载与镜像；转载请注明来源并保留原文链接。