600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 【解决方法】如何压缩网页字体文件

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

时间:2022-12-21 10:44:21

相关推荐

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

背景

一个小的 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++ makegit clone --recursive /google/woff2.gitcd woff2make clean all

安装完成之后,咱们把前面已经压缩过一次的字体文件拷贝到woff2根目录,开始执行压缩:

./woff2_compress NotoSansHans-Bold.subset.otf

运行得到如下结果:

Processing NotoSansHans-Bold.subset.otf => NotoSansHans-Bold.subset.woff2Compressed 1828176 to 1409018.

可以看到,文件从1.8M被压缩到了1.4M,又压缩了20%

总结

经过上面两次压缩,我们的字体文件大小从8.6M被压缩到了1.4M,压缩了将近85%,效果非常棒。

再配合上 CDN,页面的加载速度基本可以保证了。

好了,打完收工。

祝大家变的更强。

其他资料

font-spider:/aui/font-spiderfont-spider-plus:/allanguys/font-spider-plusGoogle woff2:/google/woff2

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。