为什么我们放弃css sprite使用iconfont字体图标

说在开头

  前面有一篇博客说道，项目中使用压缩和css sprite技术对图标进行分类和组合；

  但随着项目的不断完善，我们也遇到了很多问题：

  1.如何对图标进行分类；刚开始还比较好，我们对图标进行分类，大概有银行卡图标一类，增删改图标一类，支付类 型一类，等等。但随着，图标的不断增加和业务直接的交叉，发现分类变得很困难，渐渐失去耐心。如果，把所有图标集成到一张图；但是有这样一种情况：有些页面只使用了一个图标，同时用户只在这个页面进行操作；却要下载一整张大图，浪费资源。

  

  2.排版不容易控制，导致使用时图标位置不好控制，因为图标的大小不一样，很难使所有图标按照一定的规律排列；而且，更加痛苦的是，很多时候为了background-position:定位准确，特别保证鼠标hover效果的图片区域和默认图片的区域完全重合；我们常常会1px 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: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* 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">&#xe670;</i>
                    <div class="name">下载</div>
                    <div class="code">&amp;#xe670;</div>
                    <div class="fontclass">.xiazai</div>
                </li>

我们不建议，这样做，因为这个我们需要记住编码；而且看代码时候，不能知道这个图标的含义

2.通过伪类：（建议用这个，不用记忆，看代码时，也能知道图标意思）

<i class="icon iconfont icon-xiazai"></i>
                    <div class="name">下载</div>
                    <div class="code">&amp;#xe670;</div>
                    <div class="fontclass">.xiazai</div>
                </li>

对应的样式如下：

.icon-xiazai:before { content: "\e670"; }
.icon-yixuan:before { content: "\e671"; }

这样我们就可以把这些图标当文字控制

比如：color,font-size属性就可以使用了。鼠标的hover,mouseove，click等事件改变颜色，大小就显得容易了。

---

说在最后

 想写这篇文章很久了，终于加班完成了。

 注意：附件为，我们的字体图标库。

  

转载于:https://blog.51cto.com/shuizhongyue/1720896