快捷方便的 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 开发的版本改进的)的。

快捷方便的 Font Icons 生成工具: Iconfont

Iconfont 使用起来很简单,打开它的首页,你会发现很多图标,点击你需要的图标,就会发现图标到了右上角的购物车里,选择好了图标之后,点击购物车,即可下载下来一个 zip 包。

解压之后,会出现:demo.html, iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff 这几个文件。

其中 demo.html 文件是使用说明和效果,另外四个就是为兼容各个平台而转换生成的字体文件。你只需要打开 demo.html 文件就可以看到详细的使用说明,这里就不再赘述了。

使用字体图标有很多好处,大体如下:

  • 兼容性好,各个平台浏览器基本都可以使用,而且在某些低级浏览器中,效果比图片更好
  • 相对于同效果的图片相比,体积小,减少 http 请求,增加前端性能
  • 可维护性好,维护起来可以通过增减字体快速应用
  • 交互性好,改变字体颜色即可改变图标的颜色,同时可以配合 CSS3 的动画、渐变、过渡、变形等属性实现复杂的交互

当然也有一些缺点,例如图标通常只有一种颜色,虽然渐变可以使其颜色更加丰富,但是兼容性没了。还有一些其他的缺点,不过对于 iconfont 这个工具来说,最大的缺点就是图标太少,而且基本都是电商相关的。毕竟国内这块技术发展比较晚,优秀的设计师也比较少,仅靠阿里前端团队能做成这样已经很不容易了。如果你需要更多的字体图标,也可以来 fontello 看一下,这上面有海量的图标(甚至有新浪微博和腾讯 QQ ),也很不错。但是相对国内的来说,不太稳定。

热门文章