如今，各浏览器对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

WOFF2与icon字体化相关推荐

html页面icon字体无法显示,bootstrap中icon字体图标怎么不显示？
bootstrap中icon字体图标怎么不显示?下面本篇文章给大家介绍一下Bootstrap字体图标不显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: bootstr ...
【转】图标字体化浅谈
在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访 ...
原生小程序之引入 icon字体图标
目录原生小程序之引入 icon字体图标字体图标的配置原生小程序之引入 icon字体图标 icon官网 01:挑选对应的字体图标 02:添加入项目 ( 需要自己创建一个项目 ) 03:点击下 ...
将图片转换为icon字体图表
通过这个网址将png,jpg,gif等图片格式的图片转换成svg 其他的网址转换的svg都不能在阿里矢量图标库里面生成icon字体图标
使用多个icon 字体图标库样式冲突问题
场景:项目中使用的UI样式库中包含一套icon 字体图标库,自定义一套字体图标库,在应用的时候,出现冲突,导致一方字体图标库无法显示或者显示不正常,原因:字体命名冲突,样式命名冲突,导致字体图标显示不 ...
如何在微信小程序中使用icon字体图表
1.首先我们需要去icon字体库中选中几个想要的图标加入购物车 2.点击右上角的购物车图标进入 3. 进入购物车,点击下载代码 4.下载好的文件夹进行解压 5.将.ttf后缀文件转化为base64格式 ...
开源的icon字体图标网站
开源的icon字体图标网站 http://fontawesome.io/ https://icomoon.io/ http://www.bootcss.com/p/font-awesome/ http ...
在Vue中使用icon 字体图标
1.使用线上的阿里iconfont图标库 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html ...
【icon图标】icon字体图标的下载与使用
下载链接: icomoon图标库:Icon Font & SVG Icon Sets ❍ IcoMoon(国外) 阿里巴巴图标库:iconfont-阿里巴巴矢量图标库(国内阿里巴巴图标库) ...
在IE浏览器，icon字体图标不显示
1.问题出现场景 http地址在ie浏览器可以正常显示字体图标,但是https地址在ie浏览器无法正常显示icon图标. 2.问题解决方案 //这是本人的nginx配置文件location / {ad ...

WOFF2与icon字体化

WOFF2与icon字体化相关推荐

最新文章

热门文章