一、网页图标使用探讨
在网页上大量使用图片，会导致网页卡顿等现象，为减少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; 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较好 |
较好 |
较好 |
|
灵活性 |
强 |
差 |
差 |
差 |
|
使用成本 |
低 |
定位问题 |
低 |
定位问题 |
|
维护成本 |
低 |
中 |
高 |
中 |
相对而言，字体图标灵活性较高，方便修改图标颜色大小等样式，对于设备的适应性较强，使用与维护以及学习成本较低，目前我们对于一般网页图标将通过字体图标来实现。
二、字体图标制作
第一步：运用Adobe Illustrator制作字体
在1024px*1024px画布上制作图标，保持图标间尺寸颜色一致，将图标保存为svg格式（ps：根据图标实际大小制作更好；必须纯色，确保不存在缺陷）
第二步：在线制作图标字体并导出字体及相关文件
将相关图标导入IcoMoon（https://icomoon.io/app/#/select），并对每个图标进行命名编号，最后对整个图标字体进行命名且导出字体及相关文件
附录：
工具：
字体制作工具：FontLab_Studio_与AI；
字体转换:http://www.fontsquirrel.com/tools/webfont-generator（有时候需要搭梯子）；
CSS sprites在线生成：http://spritegen.website-performance.org/
图标字体与css sprites：https://icomoon.io/app/#/select（最实用）
参考文献
高清ICON SVG解决方案（上下）：https://isux.tencent.com/svg-icon-part-one.html；
css sprite 技术学习：http://www.jb51.net/css/37215.html
使用SVG中的Symbol元素制作Icon： http://isux.tencent.com/16292.html；
图标字体化浅谈：http://isux.tencent.com/icon-font.html；
字体图标制作详解：http://mux.alimama.com/posts/1025；
@font-face与性能http://www.cnblogs.com/demix/archive/2009/11/28/1612715.html
@font-face的困境http://www.w3cplus.com/css3/the-font-face-dilemma.html