网页中文字体压缩（woff2）、拆分、去繁体字库，提高加载速度

从客户得到的网页字体足足有 10MB 大小，会严重拖慢网页加载，如何处理？

阅读下面的解决方法前，建议先阅读网页字体优化，了解一些基本知识，以及，为什么。

字体去繁体

GBK 结尾的字体偏大的原因是包含庞大的繁体字库，大多数网页并不需要，可以使用 fontTools 得到字体的简体中文子集。

安装 Python 3.7 和 pip，再运行 pip install fonttools 来安装 fontTools。

运行 pyftsubset --help 查看命令帮助，得知需要 Unicode 列表来提取字体子集。

我们看一下 Unicode 表：

字符集	字数	Unicode 编码
基本汉字	20902字	4E00-9FA5
基本汉字补充	74字	9FA6-9FEF
扩展A	6582字	3400-4DB5
扩展B	42711字	20000-2A6D6
扩展C	4149字	2A700-2B734
扩展D	222字	2B740-2B81D
扩展E	5762字	2B820-2CEA1
扩展F	7473字	2CEB0-2EBE0
扩展G	4939字	30000-3134A
康熙部首	214字	2F00-2FD5
部首扩展	115字	2E80-2EF3
兼容汉字	477字	F900-FAD9
兼容扩展	542字	2F800-2FA1D
PUA(GBK)部件	81字	E815-E86F
部件扩展	452字	E400-E5E8
PUA增补	207字	E600-E6CF
汉字笔画	36字	31C0-31E3
汉字结构	12字	2FF0-2FFB
汉语注音	43字	3105-312F
注音扩展	22字	31A0-31BA
〇	1字	3007

* 转载自汉字 Unicode 编码范围

这里会遇到一个问题，基本汉字（4E00-9FA5）区间内，简体字、繁体字是交叉的，没有一个固定的简体区间和繁体区间，所以需要一个简体字的 Unicode 表，经过整理，我得到最终的 unicodes 文件，再加入 latin 的区间（0000-00FF），以及中文标点符号，作为参数传入 fontTools 获得字体子集。

你可以直接从 Gist 下载我整理好的文件：sc_unicode.txt，并和需要处理的字体放在一起。

pyftsubset fang-zheng-hei-ti-gbk.ttf --unicodes-file=sc_unicode.txt

该命令会压缩方正黑体，执行后可在同目录下找到 fang-zheng-hei-ti-gbk.subset.ttf，字体大小变为原来的 27.6%

2020/05/13  10:53         2,823,032 fang-zheng-hei-ti-gbk.subset.ttf
2020/05/12  11:09        10,210,812 fang-zheng-hei-ti-gbk.ttf

字体压缩

编译安装 Google woff2（笔者的环境是 Ubuntu 16.04）

sudo apt-get install -y git g++ make
git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all

再压缩字体

./woff2_compress ./fang-zheng-hei-ti-gbk.ttf
Processing ./fang-zheng-hei-ti-gbk.ttf => ./fang-zheng-hei-ti-gbk.woff2
Compressed 6760548 to 3704803.

2020/05/12  11:09        10,210,812 fang-zheng-hei-ti-gbk.ttf
2020/05/12  17:29         3,704,896 fang-zheng-hei-ti-gbk.woff2

可见对方正黑体进行压缩后，压缩比 36.3%

如果配合去繁体使用，最终字体大小只有 1.09 MB (1,148,408 bytes)，效果显著。

最终使用时，还需要考虑 woff2 的浏览器兼容问题，提供多种格式（woff 和 ttf）保证兼容。

字体拆分

请阅读：Unicode-range 子集内嵌

参考资料

1. 网页字体优化 https://developers.google.cn/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=zh-cn
2. fontTools Docs https://fonttools.readthedocs.io/en/latest/
3. 汉字 Unicode 编码范围 https://www.qqxiuzi.cn/zh/hanzi-unicode-bianma.php
4. Unicode Table for Simplified Chinese Characters https://www.ansell-uebersetzungen.com/gbuni.html

   Landscape Vectors by Vecteezy