跳转到主要内容

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

中文字体为什么这么大

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

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

拆分子集是什么意思

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

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

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

    两种做法

    做法 说明 适合 按页面内容提取 只把页面上用到的字打包成一个小文件 内容固定的页面,如活动页、海报页 按字符范围切片 把整个字体切成许多小片,配合 unicode-range 按需加载 内容会变化的网站,如博客、文档站、用户发布内容的网站

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

    自己拆还是直接用现成的

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

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

    注意事项

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