您当前位置:新疆网站建设-新疆网站制作-新疆二域设计 >技术教程 >前端教程 >经验技巧 >浏览信息

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

发布时间:2015/12/12 18:12:01点击数(0)

说在开头
  前面有一篇博客说道,项目中使用压缩和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,

效果图如下:(文章附件,会附上我们项目目前的字体图片库)

首选利用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">&#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等事件改变颜色,大小就显得容易了。

关键字:
上一篇: 没有了
下一篇: Emmet操作技巧收集
0