快捷方便的 Font Icons 生成工具: Iconfont
字体图标和 @font-face
先来简单的介绍一下字体图标。字体图标是近两年才流行起来的技术,主要是因为 CSS3 增加了一个非常实用的属性 @font-face
。传统的网页中的字体设置,使用 font-family
属性来定义,而且受限于浏览者电脑上所安装的字体,如果浏览者电脑上没有安装对应字体,那么网页渲染起来就会使用其他字体来代替。
而新增的 @font-face
改变了这一现状,使用该属性,可以指定服务器上的一个字体,当浏览者访问的时候,会优先下载服务器上的字体,然后再使用该字体渲染网页。这样就可以发挥设计师的想象,灵活的任意应用字体,同时不需要考虑不同平台的差异。该属性的兼容性也非常好,令人惊奇的是,早期 IE 就已经内置了这个功能(虽然要求字体的格式为 EOT ),完全可以用在 IE6、IE7 上面。
不过不要高兴的太早,这个属性对于中文字体来说,没有意义。因为中文文字太多,字体往往有几兆甚至十几兆大小,如果使用这个属性,还需要转换各个格式的字体,让浏览器先下载几十兆的字体再渲染网页是不现实的。
但是也不要悲伤,很快人们就发现 @font-face
功能不仅仅可以用在改变文章的字体样式上,还可以来做字体图标。
字体其实就是一种图标,把对应的基础的文字,渲染成有棱有角的文字。如果某个文字的字体,并不设计成那个文字的变形,而设计成截然不同的图标,那么当网页中出现这个文字,就会渲染出一个图标。
配合上 @font-face
就有了 Font Icon
这项技巧。在网页中使用 @font-face
引入生成好的 字体文件 ,然后在网页中需要使用某个图标的地方,写上对应的“文字”,那么在浏览器中就可以看到图标。
快捷方便的 Font Icons 生成工具: Iconfont
那么生成这个字体文件就变成了第一个难题,因为我毕竟不是设计师,也不是字体开发者,我怎么来做这样的字体图标?所以就有很多技术领先的团队或者公司,开发了用于生成这种字体的在线工具。Iconfont 就是今天要介绍的工具,它是由阿里巴巴前端团队开发的,国内领先(好像就这一家,由之前 一淘UX 开发的版本改进的)的。
Iconfont 使用起来很简单,打开它的首页,你会发现很多图标,点击你需要的图标,就会发现图标到了右上角的购物车里,选择好了图标之后,点击购物车,即可下载下来一个 zip 包。
解压之后,会出现:demo.html
, iconfont.eot
, iconfont.svg
, iconfont.ttf
, iconfont.woff
这几个文件。
其中 demo.html
文件是使用说明和效果,另外四个就是为兼容各个平台而转换生成的字体文件。你只需要打开 demo.html
文件就可以看到详细的使用说明,这里就不再赘述了。
使用字体图标有很多好处,大体如下:
- 兼容性好,各个平台浏览器基本都可以使用,而且在某些低级浏览器中,效果比图片更好
- 相对于同效果的图片相比,体积小,减少 http 请求,增加前端性能
- 可维护性好,维护起来可以通过增减字体快速应用
- 交互性好,改变字体颜色即可改变图标的颜色,同时可以配合 CSS3 的动画、渐变、过渡、变形等属性实现复杂的交互
当然也有一些缺点,例如图标通常只有一种颜色,虽然渐变可以使其颜色更加丰富,但是兼容性没了。还有一些其他的缺点,不过对于 iconfont 这个工具来说,最大的缺点就是图标太少,而且基本都是电商相关的。毕竟国内这块技术发展比较晚,优秀的设计师也比较少,仅靠阿里前端团队能做成这样已经很不容易了。如果你需要更多的字体图标,也可以来 fontello 看一下,这上面有海量的图标(甚至有新浪微博和腾讯 QQ ),也很不错。但是相对国内的来说,不太稳定。