说在开头
前面有一篇博客说道,项目中使用压缩和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"></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属性就可以使用了。鼠标的hover,mouseove,click等事件改变颜色,大小就显得容易了。
说在最后
想写这篇文章很久了,终于加班完成了。
注意:附件为,我们的字体图标库。
转载于:https://blog.51cto.com/shuizhongyue/1720896