背景
一个小的 H5 项目,客户要求使用指定的字体,一般来讲如果有特殊字体,前端这边都按照切图来处理了。
但是这个项目中的特殊字体的字符内容是变化的,也就没办法提前切图。
所以只能在网页中使用字体文件,又因为文件比较大,影响页面加载速度,一方面考虑使用 CDN 来保存字体文件,另一方面也考虑把文件压缩一下。
解决思路
明确了问题,下面就是怎么解决问题了。
解决这个问题有两个思路:
一种是使用一些前端工具,比如 font-spider
、font-spider-plus
等,根据网站内容压缩字体。
另外一种,是单纯压缩文件本身,把一些生僻字、繁体字等排除,保留常用字符,用这种方式来最大限度压缩字体文件的大小。
因为我们的文本内容是动态生成的,不确定性很强,所以这里采用第二种方式。
另外,关于网页字体优化的更详细的建议和方法,可以参考这篇文章。
解决步骤
废话不多说,开搞
1、使用 fonttools
压缩字体文件
需要 Python
环境,并已安装好 pip
。
我使用的是
Python 3.7.4
,pip 19.1.1
使用 pip
来安装 fonttools
pip install fonttools
从这里下载已经整理好的字体编码列表文件 sc_unicode.txt
。
执行以下命令开始压缩文件:
pyftsubset NotoSansHans-Bold.otf --unicodes-file=sc_unicode.txt
其中 NotoSansHans-Bold.otf
是待压缩的字体文件,sc_unicode.txt
是咱们刚刚下载的编码文件。
执行完成之后,会生成一个 NotoSansHans-Bold.subset.otf
文件,也就是压缩后的文件,这里比较一下两个文件的大小:
可以看到文件大小从 8.6M
被压缩到了 1.8M
,压缩了将近 80%
,压缩率很客观。
2、使用 Google woff2
压缩字体文件
还没完,还能继续压缩。
编译安装 Google woff2
(我的环境是 OSX,其他环境大家可以自测一下):
sudo apt-get install -y git g++ make
git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all
安装完成之后,咱们把前面已经压缩过一次的字体文件拷贝到 woff2
根目录,开始执行压缩:
./woff2_compress NotoSansHans-Bold.subset.otf
运行得到如下结果:
Processing NotoSansHans-Bold.subset.otf => NotoSansHans-Bold.subset.woff2
Compressed 1828176 to 1409018.
可以看到,文件从 1.8M
被压缩到了 1.4M
,又压缩了 20%
。
总结
经过上面两次压缩,我们的字体文件大小从 8.6M
被压缩到了 1.4M
,压缩了将近 85%
,效果非常棒。
再配合上 CDN,页面的加载速度基本可以保证了。
好了,打完收工。
祝大家变的更强。
其他资料
- font-spider:https://github.com/aui/font-spider
- font-spider-plus:https://github.com/allanguys/font-spider-plus
- Google woff2:https://github.com/google/woff2