web字体压缩方案

1. 问题

web端通常由于字体文件体积过大，导致页面加载慢，影响客户的体验。

2. 两种场景

2.1 活动或宣传页面

通常为一些静态html页面，页面上的文本内容是固定的，只需要将页面上用到的字体做成字体文件即可。

解决方案

字蛛
字蛛通过扫描index.html页面中用到的字体和@font-face样式属性，将原本字体文件中用到的字体抽离出来，生成额外的处理文件。

2.2 管理或表单页面

涉及输入，通常为一些需要录入，输入额外字体的页面，文本内容不固定。

解决方案

正式处理问题之前，要先想清楚几个问题：

1. woff2字体比ttf字体要小，最终产物应该是woff2字体。
2. 字体文件通常是拥有多国unicode语言集合的，即使是做国际化应该也是每门语言一个文件，应该对文件进行拆分。

开始做：

1. 使用python工具fonttools将字体的子集抽离出来。

# 安装fonttools工具
pip install fonttools

2. 找到文档中关于子集api的位置，根据文档得知可以使用 -uncode 参数来指定子集范围，并且我们知道中文的unicode范围是在4E00-9FA5

# 生成对应的字体子集
fontTools.subset ./xxx.ttf -unicodes=4E00-9FA5

3. 子集字体已经生成了，但是还有最后一步，最终我们要获得的是woff2的字体文件，使用Converter，将最后的字体文件转换成woff2格式即可。

3. 参考文章

fonttools
reduce-webfont-size