鍍金池/ 問答/HTML5  Python  網(wǎng)絡(luò)安全  HTML/ 2018年，雪碧圖（CSS Sprite）和字體圖標(biāo)（Icon Font）誰更適

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

在閱讀很多講到關(guān)于前端網(wǎng)站優(yōu)化和請求優(yōu)化的文章中都提到了雪碧圖，但在本人實際生產(chǎn)項目中基本從未使用過。觀察各大平臺（淘寶，天貓，京東，蘇寧等）在網(wǎng)頁中也已經(jīng)基本棄用了雪碧圖。

所以在2018年，雪碧圖還值得推廣嗎？

回答
編輯回答
她愚我

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

2017年11月1日 09:43
編輯回答
我甘愿

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

2017年11月8日 00:12
編輯回答
挽青絲

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

針對你的問題，我特意都翻看了下這幾個站點
京東還是有很多素材和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的部分

2017年1月11日 05:28
編輯回答
貓小柒

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

2017年7月29日 10:01
編輯回答
眼雜

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

2017年12月13日 22:13