我们在开发前端页面应用的时候，常常要用到一些小图标，比如首页、上传、位置、电话、分享，购物车等各式各样的图标。如果每个图标都发送一次http请求的话，这会较大的影响前端性能。通常会将所有图标整合到一起，只占用一个http请求。整合的方式有CSS sprite和iconfont。
CSS sprite的原理其实很简单，就是把所有用到的图标拼接到同一张png图片里，给图标元素设置背景图片，并通过CSS调整元素的background-position属性，使同一张背景图的不同部位在不同的元素中展现。要注意的是，元素的background-size设置的值应该和元素的大小成一定的倍数关系。比如设置了图标元素的宽高是40px，而png里每个图标的大小是80*80，这时候background-size应该是"50% auto"。为什么我们在合并图标的时候要做大一点呢？因为在手机上用，而手机通常是2倍屏、2.5倍屏，甚至3倍屏，按照一定的比例做大一点，这样在手机上用才不会发虚。
iconfont，简单的说就是通过CSS的@font-face引入一套自定义的字体，并命名该字体。在自定义的字体内部，图标和某个字符串码是一一对应的，所以如果某个元素想设置为某个图标，在元素内输入该图标对应的字符串码，并设置该元素的font-family为引入的字体名称。由于要记住每个图标对应的字符串码很不方便，所以通常会 通过元素的:before伪元素来实现，":before"的content设置为对应图标的字符串码即可，这样我们就可以通过为元素添加类名来实现展示图标。
以上的任何一种整合方式，都有自身的缺点，CSS sprite无法更改图标颜色，同一个图标的不同颜色要一起整合进去。同时要增加图标比较麻烦，维护困难。iconfont要为不同的浏览器准备不同格式的字体，同时增加图标时也很不方便。
最近看了一些这方面的文章，大家都认为SVG sprite会是主流。简单的说，这种方式是通过svg来绘制图标，每一个图标一个path，并用symbol标签包裹，使其不显示。在用到的时候，再通过use标签引用。如果不需要考虑ie浏览器的话，甚至都不需要在在html内引入所有的svg代码，通过svg的use标签的xlink:href=“test.svg#icon”以文件名+id的方式引用单个图标。
svg sprite的处理方式，引入的是矢量图标，可以无限放大，并且可以精细的控制图标的每一个线条，让图标内部的颜色可以不一样，增减图标也相较于前两种要方便不少。如果每个图标的svg代码量太多的话，可以找一些工具进行适当的压缩，删除不必要的属性，并对path内的坐标值保留2-3位小数即可。唯一的缺憾在于兼容性上，只有ie9+和现代浏览器可以使用这种方式，要兼容ie8及以下的话，还是考虑前两种方式吧。
说到兼容问题，上周去一个公司面试前端岗位，一个小姑娘面的我，说他们做的是政府和事业单位的外包项目，要求兼容ie6，要求兼容ie6，要求兼容ie6.......一些机关单位的网站长得那么丑不是没有道理的，哈哈哈。
阿里的iconfont.cn上有大量的图标，并且提供png、svg、ai几种下载格式，在下载的代码中用iconfont和svg sprite的使用demo，上面明确说了推荐svg的方法。
閱讀更多 學無止境當讀書 的文章
