WOFF2与icon字体化

5年写过一篇WOFF和Google Font API,当时WOFF还只是刚出现,如今,各浏览器对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格式尚且相对较新,大部分工具都不提供导出功能。为此可以选择下面的工具做相应的转换:

BGM @ Viva la Vida - Coldplay