记一次精简Icons图标字体库的实现

起因

本博客使用Google Material Design风格设计，于是便也用到了Material Icons字体库，但是只用到其中一小部分图标，为了优化网站加载体验，我决定对woff2格式的Icons字体库进行精简。

方案准备

从网上我了解到python的fonttools模块，可以对字体文件进行操作，那么就首先用pip进行安装：

pip install fonttools

字体文件解包

假设woff2文件名叫MaterialIcons-Regular.woff2，安装好fonttools后，执行以下命令可以解包得到XML格式的MaterialIcons-Regular.ttx。

ttx MaterialIcons-Regular.woff2

用记事本打开，可以看到LigatureSubst里会有若干个LigatureSet，很容易就看明白了，比如说这里glyph="h"的LigatureSet里可以看到"o,m,e"对应的是"glyph00744"，意思就是home对应的字形叫glyph00744。

值得注意的是，underscore对应的是下划线。

字体编辑

那么目标很明确了，我们只要把多余的glyph都删掉就行了（删掉后原id可以都不用动），具体来说，除了LigatureSet要修改，还有前面的GlyphID、TTGlyph和ClassDef标签。

有一个需要注意的点是，前缀需要尽量往后面放，比如说同时有menu_book和menu这两个图标：

<LigatureSet glyph="m">
    <Ligature components="e,n,u,underscore,b,o,o,k" glyph="glyph00999"/>
    <Ligature components="e,n,u" glyph="glyph00577"/>
</LigatureSet>

那么在LigatureSet里需要把menu放在后面，否则menu_book会直接匹配出前缀menu。

字体重新编译

假如修改后的ttx文件为changed.ttx，那么执行以下命令以生成最终的woff2字体文件：

ttx --flavor woff2 -o min.woff2 changed.ttx

结果

经过我大量的删减，最终只留下我所用到的十几个Icons，woff2文件的体积也从原来的80多KB降至不到2KB，大大提高了网站图标加载速度。