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

## 中文字体为什么这么大

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

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

## 拆分子集是什么意思

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

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

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

## 两种做法

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

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

## 自己拆还是直接用现成的

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

文风字体为收录的字体提供了按字重和子集拆好的网页字体，引用方法见 [网页字体引用与 CDN 接入](https://docs.cocobook.com/books/windfonts/page/cdn)。

## 注意事项

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