2018年，雪碧图（CSS Sprite）和字体图标（Icon Font）谁更适合用于生产环境中？

Question

在阅读很多讲到关于前端网站优化和请求优化的文章中都提到了雪碧图，但在本人实际生产项目中基本从未使用过。观察各大平台（淘宝，天猫，京东，苏宁等）在网页中也已经基本弃用了雪碧图。

所以在2018年，雪碧图还值得推广吗？

Answer 1

字体图标肯定更好呀，但是有些图标字体图标不好弄，就可以用雪碧图，看项目需求吧，不必拘泥于选择

Answer 2

基于上面人的回答接着说
针对于 你说的淘宝，天猫，大部分都是电商类型网站，目前他们使用的字体图标已经更多了
除了字体图标还有SVG的图标
例：阿里图标库

---

针对你的问题，我特意都翻看了下这几个站点
京东还是有很多素材和ICON是使用的雪碧图

https://misc.360buyimg.com/product/search/1.0.4/css/i/sprite-photo-search.png
https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/sprite.service.png

---

但问题是 我们不一定要跟着大厂的脚步
首先你要知道雪碧图的好处在哪里
再来就是你项目中是否需要用的
因为雪碧图不仅仅是用于ICON的部分

Answer 3

我是前端 我喜欢字体图标 如果是icon的话
如果是 做H5动画类的 那么还是只能用雪碧图

Answer 4

各有各的好处，各有各的最适用的场景。比如说，弄个过度动画，你要是用字体图标就没法弄，但是用雪碧图就很简单了，结合css3的animation，很容易做到。
比如说我的这篇文章做说的动画，就只能用雪碧图。

Answer 5

各有各的好处，但是雪碧图用在rem布局中，很难计算，还有另外一点就是用图片的缺陷，可能在高分辨率下，图片会模糊。而用字体文件的缺陷也很明显，比如，多色图标的支持还不完善，如果需要色彩灿烂的icon，用字体文件就不合适啦。看情况选择雪碧图、字体文件或者单张图片。没有说哪种是最好的，只有哪种方式更适合你的项目。
推荐你看看：Iconfont 多色图标和渐变色图标的应用