2018年，雪碧圖（CSS Sprite）和字體圖標(biāo)（Icon Font）誰(shuí)更適合用于生產(chǎn)環(huán)境中？

各有各的好處，但是雪碧圖用在rem布局中，很難計(jì)算，還有另外一點(diǎn)就是用圖片的缺陷，可能在高分辨率下，圖片會(huì)模糊。而用字體文件的缺陷也很明顯，比如，多色圖標(biāo)的支持還不完善，如果需要色彩燦爛的icon，用字體文件就不合適啦。看情況選擇雪碧圖、字體文件或者單張圖片。沒(méi)有說(shuō)哪種是最好的，只有哪種方式更適合你的項(xiàng)目。
推薦你看看：Iconfont 多色圖標(biāo)和漸變色圖標(biāo)的應(yīng)用

各有各的好處，各有各的最適用的場(chǎng)景。比如說(shuō)，弄個(gè)過(guò)度動(dòng)畫(huà)，你要是用字體圖標(biāo)就沒(méi)法弄，但是用雪碧圖就很簡(jiǎn)單了，結(jié)合css3的animation，很容易做到。
比如說(shuō)我的這篇文章做說(shuō)的動(dòng)畫(huà)，就只能用雪碧圖。

基于上面人的回答接著說(shuō)
針對(duì)于 你說(shuō)的淘寶，天貓，大部分都是電商類(lèi)型網(wǎng)站，目前他們使用的字體圖標(biāo)已經(jīng)更多了
除了字體圖標(biāo)還有SVG的圖標(biāo)
例：阿里圖標(biāo)庫(kù)

針對(duì)你的問(wèn)題，我特意都翻看了下這幾個(gè)站點(diǎn)
京東還是有很多素材和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

但問(wèn)題是 我們不一定要跟著大廠的腳步
首先你要知道雪碧圖的好處在哪里
再來(lái)就是你項(xiàng)目中是否需要用的
因?yàn)檠┍虉D不僅僅是用于ICON的部分

字體圖標(biāo)肯定更好呀，但是有些圖標(biāo)字體圖標(biāo)不好弄，就可以用雪碧圖，看項(xiàng)目需求吧，不必拘泥于選擇

我是前端 我喜歡字體圖標(biāo) 如果是icon的話
如果是 做H5動(dòng)畫(huà)類(lèi)的 那么還是只能用雪碧圖