关于网页图标使用与字体图标制作

一、网页图标使用探讨

在网页上大量使用图片，会导致网页卡顿等现象，为减少http的请求次数，提升网页性能，减少时间和带宽以及提升前端工作效率，我们对相关网页图标的实现方法进行了研究。

(1)iconfont字体图标

iconfont实质上是将图标转成字体格式，通过添加CSS样式来控制图标的颜色大小以及各类样式效果。它的优点是轻量级（文件大小较小）、灵活性（可以通过CSS来控制文字样式）、兼容性（各类浏览器兼容）。缺点是更改不方便，制作成本高，字体小于16时，容易出现锯齿。

 1 /*字体图标：将图标转换为字体，在css插入@font-face及相关代码引用该字体，即可获得相关图标*/
 2 @font-face {
 3     font-family: 'yizitfont';
 4     src:    url('fonts/yizitfont.eot?occy8k');
 5     src:    url('fonts/yizitfont.eot?occy8k#iefix') format('embedded-opentype'),
 6         url('fonts/yizitfont.ttf?occy8k') format('truetype'),
 7         url('fonts/yizitfont.woff?occy8k') format('woff'),
 8         url('fonts/yizitfont.svg?occy8k#yizitfont') format('svg');
 9     font-weight: normal;
10     font-style: normal;
11 }
12 [class^="yizit"], [class*=" yizit"] {
13     /* use !important to prevent issues with browser extensions that change fonts */
14     font-family: 'yizitfont' !important;
15     speak: none;
16     font-style: normal;
17     font-weight: normal;
18     font-variant: normal;
19     text-transform: none;
20     line-height: 1;
21     font-size:12px;
22 
23     /* Better Font Rendering =========== */
24     -webkit-font-smoothing: antialiased;
25     -moz-osx-font-smoothing: grayscale;
26 }
27 .yizitshare2:before {
28     content: "\e903";
29 }
30 .yizitmail:before {
31     content: "\e904";
32 }

(2)CSS Sprites

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许我们将一个页面涉及到的所有零星图片都包含到一张大图中去，“background-image”，“background- repeat”，“background-position”的组合进行背景定位。能很好地减少了网页的http请求次数，从而大大的提高了页面的性能,节省时间和带宽。缺点是图标具体位置定位困难，图标修改成本较高(不方便统一修改图标颜色与大小)，宽屏适应问题。

CSS Sprites 在线工具：http://spritegen.website-performance.org/

 1 /*CSS sprites：将所有图标集中在一张图片上，然后通过css定位引用相关图片*/
 2 .icon {
 3     display: inline-block;
 4     background-repeat: no-repeat;
 5     background-image: url(sprite.svg);
 6 }
 7 .icon-share2 {
 8     width: 16px;
 9     height: 16px;
10     background-position: 0 0;
11 }
12 .icon-mail {
13     width: 16px;
14     height: 16px;
15     background-position: 0 -26px;
16 }

(3)SVG Defs/Symbols

这种其实就是在SVG Sprites上面更进一步的使用了，SVG Sprites是需要我们去通过坐标获取对应位置图标的，但是SVG Defs/Symbols就更简单了，直接通过给每个SVG ICON定义ID，直接调用对应ID即可。缺点是IE对SVG的兼容性不好，对于不熟悉svg的童鞋修改成本较高。

<!--svg 部分-->
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-share2" viewBox="0 0 1024 1024">
<title>share2</title>
<path class="path1" d="M864 704c-45.16 0-85.92 18.738-115.012 48.83l-431.004-215.502c1.314-8.252 2.016-16.706 2.016-25.328s-0.702-17.076-2.016-25.326l431.004-215.502c29.092 30.090 69.852 48.828 115.012 48.828 88.366 0 160-71.634 160-160s-71.634-160-160-160-160 71.634-160 160c0 8.622 0.704 17.076 2.016 25.326l-431.004 215.504c-29.092-30.090-69.852-48.83-115.012-48.83-88.366 0-160 71.636-160 160 0 88.368 71.634 160 160 160 45.16 0 85.92-18.738 115.012-48.828l431.004 215.502c-1.312 8.25-2.016 16.704-2.016 25.326 0 88.368 71.634 160 160 160s160-71.632 160-160c0-88.364-71.634-160-160-160z"></path>
</symbol>

 1 <!--html 部分-->
 2    <div class="pb">
 3         <div class="pb1">
 4             <span class="icon icon-share2"></span>
 5             <p>Share</P>
 6         </div>
 7         <div class="pb1">
 8             <span class="icon icon-mail"></span>
 9             <p>Mail</P>
10         </div>
11     </div>

(4)Svg Sprites +Png Sprites + Image-set（由腾讯前端提出）

Webkit内核"safari6"和“chrome21”支持CSS4的background-image新规范草image-set，支持Web前端人员解决不同分辨率下图片的显示，特别的（Retina屏幕），使不同设备显示不同的图片，避免了IE对SVG兼容性的问题。缺点是支持image-set的浏览器不多，修改图标成本高(不方便统一修改图标颜色与大小)，图标定位困难。

/*在css sprites的基础上优化*/
.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(svgpngsprites.png);
    background-image:-webkit-image-set(url(svgpngsprites.png) 1x,url(svgpngsprites.svg) 2x);        
    }
.icon-share2 {
    width: 16px;
    height: 16px;
    background-position: 0 0;
}
.icon-mail {
    width: 16px;
    height: 16px;
    background-position: 0 -26px;
}

l 不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像；
l 支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；
l Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。

(5)几种网页图标的比较

	iconfont	CSS Sprites	SVG Symbols	Image-set
大小	18.5k	9.96k	8.29k	11.9k
兼容性	强	ie8	ie8	强
适应性	强	差（宽屏定位）	强	差（宽屏定位）
清晰度	16px↓差	Svg较好	较好	较好
灵活性	强	差	差	差
使用成本	低	定位问题	低	定位问题
维护成本	低	中	高	中