使用 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 在国内的访问都不太稳，我决定从本地直接引入。

相关文章：字体方案以及 Fontmin 优化

压缩字体解决办法

上面的文章里使用了 Fontmin，「一个纯 JavaScript 字体子集化方案」。脚本会根据生成的网页自动压缩所有字体，但是诗词所使用的毕竟是极少数，所以可以先对此字体进行压缩再上传，官方提供 Windows 便携版下载，使用方法很简单，如下图：

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

修改 css 调用

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

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

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

这一条替换成自己的字体就好了，比如我调用本地改为 src:url("/fonts-min/Poem.woff2");

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

非常 Nice!

---

Happy Birthday to Misaka Mikoto!

Image Source : MOMO.