传统图片
- 加载一次图片就要增加一次HTTP请求
- 不适应多屏
雪碧图
- 减少了HTTP请求
- 加大了CSS 编码和维护难度
字体图标
- 放大不失真
- 可定制
- 本质是字体 可以设置 大小 颜色 和 阴影
- 多色支持不足
字体图标三种引用方式
- unicode(最原始、兼容性最好Ie6+、不支持多色。)
- font-class(unicode方式的变种,书写更直观,主要是解决unicode书写不直观,语意不明确的问题、兼容性良好Ie8+,不支持多色。)
- symbol(兼容性较差,支持 ie9+及现代浏览器、支持多色图标)