中文网页字体为什么要拆分子集

中文字体为什么这么大

一款英文字体通常只有几百个字符，文件几十 KB。一款中文字体要覆盖常用汉字、繁体字和各种符号，动辄几万个字符，一个字重的文件往往就有几 MB 到十几 MB。例如思源黑体的单个简体中文字重就有好几 MB。

如果网页直接引用整个字体文件，访客要先下载完这几 MB，才能看到用这款字体显示的文字。手机网络下，这意味着长时间的空白或字体跳变。

拆分子集是什么意思

拆分子集，就是把一个大字体文件按字符切成很多个小文件，每个小文件只包含一部分字符，并用 unicode-range 标明自己包含哪些字符：

• 英文、数字和标点一个文件；
• 常用汉字按使用频率或编码范围分成几十到上百个小文件；
• 不常用的字再分若干个文件。

浏览器看到页面上实际出现了哪些字，就只下载包含这些字的那几个小文件。一篇普通文章往往只需要下载总大小的一小部分。

两种做法

第一种文件最小，但页面内容一改就得重新生成，否则新出现的字会用后备字体显示。第二种不受内容变化影响，是大多数网站的选择。

自己拆还是直接用现成的

自己拆分需要用字体工具处理文件，并为每个分片写 @font-face，还要考虑缓存和更新。也可以直接使用已经拆分好的网页字体服务：只需在页面里引用一份 CSS，分片和按需加载都已经处理好了。

文风字体为收录的字体提供了按字重和子集拆好的网页字体，引用方法见 网页字体引用与 CDN 接入。

注意事项

• 先确认许可允许：拆分子集属于对字体文件的处理，并要放到网站上供下载。开源字体（如 SIL 开放字体许可证下的字体）一般允许；商业字体请先确认是否有网页嵌入授权。见《用字前先看许可：能不能商用、能不能改、能不能嵌入》。
• 保留后备字体：分片加载需要时间，font-family 里要写好系统后备字体，并设置合适的 font-display。写法见《在网页里使用字体：@font-face 的现代写法》。
• 只用 WOFF2：每个分片都用 WOFF2 格式，体积最小。