字体子集

字体子集 是把一套字体里的字形拆成若干份文件，浏览器只下载当前页面用得到的那一份^[1]。中文站点最需要它，一套常用汉字字体常在 5 MB 以上，整包发给每个访客不合理。

两条实现路径

第一条是 unicode-range。@font-face 规则里可以声明这份资源支持哪些码位，浏览器按页面里实际出现的字符选子集^[1]。Google 的指南举例：把同一字族拆成拉丁与日文两个子集，各自给出范围，访问者只下载需要的那份^[1]。

第二条是手动子集化。用 pyftsubset 这类工具按字符表裁字体，输出一份小文件^[1]。老浏览器不支持 unicode-range 时只能走这条路^[1]。

@font-face {
  font-family: "Awesome";
  src: url("awesome-latin.woff2") format("woff2");
  unicode-range: U+000-5FF;
}

按文字拆，不按页面拆

指南给出的建议是按文字系统划分子集，例如拉丁一套、西里尔一套^[1]。按页面裁字会造成每页一组互不相同又重叠的字符集，缓存被切碎，总量反而更大^[1]。

部分字体服务默认做子集化，Google Fonts 会在提供链接时按查询参数切字^[1]。自建字体文件时这一步要自己完成。

与性能指标的关系

子集化直接减小资源体积，字体到位更快，font-display 的替换期随之缩短^[2]。字号与行高要按回退字体校准，替换发生时页面不跳^[3]。

常见误用

第一种是把整个字重字族全部引入，实际只用两个字重。第二种是给每个模板单独裁一份小文件，缓存失效。第三种是裁掉了标点与生僻字，正文出现方框或回退字体混排^[1]。

附录

参见

• Web 字体
• font-display
• 关键渲染路径
• 浏览器缓存
• 图片压缩

参考资料

官方（境外）

1. 《缩减网页字体大小》，web.dev，Google。
2. 《Optimize webfont loading》，web.dev，Google。
3. 《Font best practices》，web.dev，Google。

外部链接

• pyftsubset（fonttools），GitHub。