使用 Fontmin 极致压缩字体文件

发现 Error

今天看控制台的时候无意间看到有一项报错，发现是 Tag plugins plus，使用诗词效果时字体文件调用失败。因为这部分魔改是参考 Akilar 大佬的，所以我也去原教程那里逛了一逛，发现字体同样没有调用。

打开控制台也一样看到了 error:

Failed to load resource: the server responded with a status of 404 ()

unpkg.zhimg.com/akil..20/fonts/Poem.ttf:1

于是顺藤摸瓜，找到了大佬的静态资源仓库，发现资源介绍里 cdn 用了 jsDelivr 与 UNPKG 两家，但是 css 中调用的 poem.ttf 文件默认源 https://unpkg.zhimg.com/akilar-candyassets@1.0.20/fonts/Poem.ttf 却并不存在，打开只有 “Not Found”。（unpkg.zhimg.com 是知乎家的 unpkg 镜像源），而在 unpkg 源站 unpkg.com 中文件是存在的。但是鉴于这两家 cdn 在国内的访问都不太稳，刚好前几天我也把自定义资源全放到 Cloudinary 了，所以干脆把字体也扔上去。

压缩字体解决办法

前面说到可以托管到 Cloudinary，但是他家免费的空间和流量都是有限的啊 (￣﹃￣)，这一个字体文件就有 5 M 大小，一次访问下载一次我不得破产，而且文件这么大网页加载速度也会慢，于是我就想寻找一个压缩字体文件的办法。

Congratulations! 🎉🎉🎉

Fontmin，「一个纯 JavaScript 字体子集化方案」。官方提供 Windows 便携版下载，使用方法很简单，如下图：

生成后可以看到与原文件相比真是小到了极致！

修改 css 调用

字体压缩好了也就可以放心使用了，这时候只需修改调用源即可。

查看控制台发现是 tag_plugins.css 这个文件，于是在文件中搜索 poem，把

src: url("https://unpkg.zhimg.com/akilar-candyassets/fonts/Poem.ttf");

这一条替换成自己的字体就好了。

最后来看一下效果：（调用前 --> 调用后）

非常 Nice!

---

Happy Birthday to Misaka Mikoto!

Image Source : MOMO.