自定义字体体积过大解决方案

前两天刚把网站字体改成了苹方，但是没有考虑到字体文件太大的问题，导致新版的博客加载速度贼慢。

而且移动端还会出现加载时间过程页面长时间处于空白状态，贼需要优化加载速度。

今天就来聊聊如何优化自定义字体包的体积。

前言

目前网上主流的字体包优化答题分为两个方面。

1. 转换字体格式，例如从ttf—>woff2。
2. 使用工具从全部单词的字体文件中提取需要的字体，重新生成新的字体包。

格式转换

肯定会有人问，为什么要从ttf转换成woff2呢？有什么优势？

TTF全名TrueType Font，由美国苹果公司和微软公司共同开发，年限有点久了。而woff2相当于它的升级版吧，对比于ttf最大的优势就是利用了压缩来减少字体包的大小，对网络带宽需求更小且设备上解压速度也很理想。

格式转化后woff2格式大小最多能比ttf格式大小减少50%，压缩比还是非常可观的。

但是woff2的兼容性没有ttf好，主流的浏览器都支持，更久远的浏览器比如大名鼎鼎的IE就不支持了。

读者可以根据自身实际情况决定是否转换字体包格式。

字体提取

相较于格式转化，字体提取差不多能比没提取前减少90%，没错只有原来的十分之一的大小。

常用中文大概有3500字，字体提取的原理就是从完整的字体包中把这3500字提取出来单独生成一个新的字体文件，这样就能有效的减少整个包的大小。

目前主流的提取插件是font-spider，但是插件只能静态的提取出来网页上存在的中文，对于从服务器传过来的数据则抓取不到，能力有限。所以本文推荐一个使用python开发的工具——fontTools，操作简单只需要两个文件——字体包和3500常用字即可。

操作步骤

上面已经介绍了两种方式，博主是两个同时使用了。

字体包大小从原本12.7M降到了现在的444K，效果杠杠滴！！！ｂ（￣▽￣）ｄ

下面则是介绍具体的操作步骤。

前提条件：电脑上装有python环境，温馨提示最好装最新的，最次也要python3以上。

安装FontTools

1

pip install fontTools

开始取字体包子集

1

pyftsubset.exe PingFang\ SC.ttf --text-file=3500.txt

pyftsubset后面跟的第一个参数是字体包的路径，第二个–text-file则是预先准备好的3500个常用字符，执行完后会在当前目录下生成一个子集字体包。

下一步就是转换成woff2格式了，这里是用的一个在线网站进行转的。

网址：TTF to WOFF2 | CloudConvert

每天有10次转换机会，如果超过了需要登录后才能转。