本文章所述方法均效仿博文:网页中文字体压缩(woff2)、拆分、去繁体字库,提高加载速度 - iMaeGoo's Blog,本篇仅作为个人记录使用,自行压缩建议参阅原文,以免遗漏步骤。

缘由

最近把博客和导航页字体改成了「霞鹜文楷」「点点像素」。开始就是直接源文件丢到根目录,然后在 CSS 内引入。但是这俩源文件都不小,每个网页相当于多加载了10MB。并且由于博客首页的音乐播放器的加载顺序是在字体后,极大的影响了博客的使用体验(虽然并没有人看,但是自己看也不爽。遂于网上搜索字体压缩的教程,现学现做。

大致步骤

总体来说分为两步,第一步是删去中文字体中不需要的部分,第二步是将其压缩为更小体积的 woff2 格式。详见下文。

删去中文字体中不需要的部分

我们主要使用字体的简中部分,所以删去字体的繁中内容(当然,也可以删除一些不常用字,原理一致)。

使用 fonttools 完成该步骤(其环境要求及安装见引文链接),下载简体字的 unicode 表(点击下载,该表为引文链接文章的作者提供) 。键入命令:

pyftsubset <字体文件> --unicodes-file=<下载的 unicode 表>

效果如图:

打印 WARNING 仍能正常输出

然后可以看见路径下多出了一个带有 .subset 后缀的字体文件,即为需求的输出结果。

压缩为更小体积的 woff2 格式

编译安装 woff2 ,具体过程参考引文链接中的讲述,我使用的是 Ubuntu 1804 环境。

编译结束后,在目录中应有可执行程序 woff2_decompress ,输入命令:

./woff2_compress <字体文件>

输出的 .woff2 即为所求。

参考文章:

网页中文字体压缩(woff2)、拆分、去繁体字库,提高加载速度 - iMaeGoo's Blog