【解决方法】如何压缩网页字体文件

背景

一个小的 H5 项目,客户要求使用指定的字体,一般来讲如果有特殊字体,前端这边都按照切图来处理了。

但是这个项目中的特殊字体的字符内容是变化的,也就没办法提前切图。

所以只能在网页中使用字体文件,又因为文件比较大,影响页面加载速度,一方面考虑使用 CDN 来保存字体文件,另一方面也考虑把文件压缩一下。

解决思路

明确了问题,下面就是怎么解决问题了。

解决这个问题有两个思路:

一种是使用一些前端工具,比如 font-spiderfont-spider-plus 等,根据网站内容压缩字体。

另外一种,是单纯压缩文件本身,把一些生僻字、繁体字等排除,保留常用字符,用这种方式来最大限度压缩字体文件的大小。

因为我们的文本内容是动态生成的,不确定性很强,所以这里采用第二种方式。

另外,关于网页字体优化的更详细的建议和方法,可以参考这篇文章

解决步骤

废话不多说,开搞

1、使用 fonttools 压缩字体文件

需要 Python 环境,并已安装好 pip

我使用的是 Python 3.7.4pip 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
    原文作者:Bottle
    原文地址: https://blog.csdn.net/zhyl8157121/article/details/119927828
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞