WOFF2与icon字体化

如今，各浏览器对WOFF的支持都已经比较完善了。如果长期关注字体文件，就会发现现在又多了一个WOFF2的格式。没错，就如其字面意思，就是WOFF2.0。


先简单回顾一下主要的web字体文件的格式:


.eot ，Embedded Open Type，主要用于早期版本的IE，是其专有格式，带有版权保护和压缩。
.ttf ，TrueType，在操作系统里更为常见，在web上使用的话，是为了兼容早期仅支持TTF和OTF的浏览器。由于体积比较大，还需要服务器额外压缩。
.woff ，Web Open Font Format，可以看作是ttf的再封装，加入了压缩和字体来源信息，通常比ttf小40%。也是当前web字体的主流格式。
.woff2 ，Web Open Font Format 2.0，相比woff最大的优化应该是加强了字体的压缩比。目前 支持的浏览器 只有正在互彪版本号的Chrome和Firefox。
比如同样是fontawesome，woff和woff2的文件，woff2要小25%，可见增强的压缩比对文件大小的优化立竿见影。不过再怎么优化压缩也是无法解决中文字体的～中文字体将依旧长期跟随系统。


但压缩比的提升还是有意义的，特别在icon字体化方面。将icon作为字体有很多优势，比如，矢量所以缩放不模糊，不用为高dpi的设备单独做图，作为字体可以改变颜色并且自带字体对齐属性，以及低版本IE的兼容性。相比做成图片，现在如果字体拥有更佳的压缩比，那么icon字体话就又多了一个不错的理由。


当然，字体icon也有其不利的方面，相比图片和svg，其职只能是单色的，而且维护也相对要复杂。这也是为什么其应用场景多存在于后台系统而非前端页面。比如阿里云后台，在比如近段时间改版的淘宝卖家后台，都是用来字体icon，后台系统变更频率相对要小，且界面也多以简洁为主。


那么字体icon能用在前台页面吗？当然可以，并且伴随着扁平化页面的流行和多dpi设备的泛滥，这种icon字体化的趋势更加明显。但也没有必要刻意这么去做，我一直是这么觉得的，时候到了自然就翻身了。所以维持图片的做法并非过时，反而是相当稳健的选择。


我们完全用不到fontawesome这样庞大的icon集合的，通常需要自己整理出一套自己需要的图标集合。自己绘制的话推荐AI绘制好矢量然后用一些工具自动生成即可。早期工具匮乏的时候，我们还得下载一些字体编辑软件，不过现在已经没有哪个必要，已经有很多online的字体生成工具，随意选择。


题外话，由于WOFF2格式尚且相对较新，大部分工具都不提供导出功能。为此可以选择下面的工具做相应的转换：

https://www.fontsquirrel.com/tools/webfont-generator