标签：为什么我们放弃css sprite使用iconfont字体图标
说在开头
前面有一篇博客说道，项目中使用压缩和css sprite技术对图标进行分类和组合；
但随着项目的不断完善，我们也遇到了很多问题：
1.如何对图标进行分类；刚开始还比较好，我们对图标进行分类，大概有银行卡图标一类，增删改图标一类，支付类 型一类，等等。但随着，图标的不断增加和业务直接的交叉，发现分类变得很困难，渐渐失去耐心。如果，把所有图标集成到一张图；但是有这样一种情况：有些页面只使用了一个图标，同时用户只在这个页面进行操作；却要下载一整张大图，浪费资源。
2.图标位置不好控制，很多时候为了background-position:定位准确，特别保证鼠标hover效果的图片区域和默认图片的区域完全重合；我们常常会1px的尝试，调整。眼睛都看花了。
诸如下图：
3.不利于维护 新增图标不得不修改真个图，有时候为了保证某一类型的在一块区域，不得不调整其他图标的位置。
4.放大缩小，图片失真。
所以，我们决定放弃css sprite
重点，重点
为什么选择iconfont
1.兼容性良好。现在主流浏览器（包括IE6）都支持CSS3的自定义字体(@font-face)，因此可以尝试使用font来替换图片展示网站的各种icon。
2.使用方便；开发人员直接调用样式，不用为了background-position:准确定位看瞎眼睛。
3.利于维护，新增，修改，删除图标方便，各个图标之间相对独立。
4.体积很小,请求速度快，可以带来比较好的用户体验。
5.矢量图，放大，拉伸不会失真。
有些人，可能会觉得字体图标过于单调，在动画，过渡，阴影方面显得吃力；但是，在我看来这些效果并不能对用户体验造成很大影响；相反，字体的体积小，页面加载快；hover,mouse事件时，切换效果很顺畅；反而能提高用户体验。
下面分享一下目前项目中使用的iconfont实例；
生成图标的过程我就略过了这个需要跟UI协同合作，建议使用FontCreator，推荐一篇博客 http://www.uisdc.com/learning-icon-font
效果图如下：（文章附件，会附上我们项目目前的字体图片库）
首选利用font-face获取字体文件
@font-face {font-family: "iconfont";
src=\‘#\‘" /* IE9*/
src=\‘#\‘" /* IE6-IE8 */
url(‘iconfont.woff‘) format(‘woff‘), /* chrome、firefox */
url(‘iconfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url(‘iconfont.svg#iconfont‘) format(‘svg‘); /* iOS 4.1- */
}从网上，找了一下目前主流浏览器对于icon font的支持情况，如下：
IE：从IE4开始支持eot格式，IE9开始支持woff。
webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体； Safari5.1+ 开始支持woff格式
Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；
Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；
Opera：支持.ttf、.otf、.svg。 Opera 11开始支持woff；
iPad, iPhone and Android 3.0+ 支持SVG fonts。
所以，我们生成了:eot,.woff,avg等格式的字体文件
使用方式大概有两种：
1.直接下字体图标对应的编码
<i class="icon iconfont"></i> <div class="name">下载</div> <div class="code">&#xe670;</div> <div class="fontclass">.xiazai</div> </li>
我们不建议，这样做，因为这个我们需要记住编码；而且看代码时候，不能知道这个图标的含义
2.通过伪类：（建议用这个，不用记忆，看代码时，也能知道图标意思）
<i class="icon iconfont icon-xiazai"></i> <div class="name">下载</div> <div class="code">&#xe670;</div> <div class="fontclass">.xiazai</div> </li>
对应的样式如下：
.icon-xiazai:before { content: "\e670"; }
.icon-yixuan:before { content: "\e671"; }这样我们就可以把这些图标当文字控制
比如：color,font-size属性就可以使用了。
说在最后
想写这篇文章很久了，终于加班完成了。
注意：附件为，我们的字体图标库。
本文出自 “shuizhongyue” 博客，转载请与作者联系！
为什么我们放弃css sprite使用iconfont字体图标
标签：为什么我们放弃css sprite使用iconfont字体图标
原文地址：http://shuizhongyue.blog.51cto.com/7439523/1720896
