图标字体使用场景

• 1.web app(H5) 小图标 放大失真问题解决；

  • 移动页面大多数情况没办法用雪碧图，用了雪碧图表示图片大小固定了，而移动端需要兼容不同屏幕大小的移动设备，这就需要图片是可以根据屏幕尺寸而改变的。 如果你的图尺寸是固定的，那就可以用雪碧图。

• 2.PC端小图标性能更佳、小图标尺寸修改不用改原图；

  • PC端页面优化，可将部分（不是所有）雪碧图换成小图标，字体图标比雪碧图的http请求要少、体积要小；（加载一个页面时可能有多张雪碧图，但使用字体图标，文件一个就够）
  • PC端做换肤业务时，使用了字体图标实现起来更加的优雅、方便；

---

图标字体优缺点

• 1.优点；

  • 轻量（文件体积小）、灵活（样式可改变图标）、兼容性好（IE8+）。
  • icoMoon IE7支持实现原理：
  • 样式上用*zoom 触发重绘（触发haslayout）， 脚本上检测 关键字className动态插入dom节点实现；

• 2.缺点；

  • 图标只能单色调（太复杂的多色图标无法实现）、生成图标字体相对花时间。
  • 阿里巴巴iconfont+ 多色图标实现原理：
  • 生成svg合集， 然后使用svg呈现图标。