我們在開發前端頁面應用的時候，常常要用到一些小圖標，比如首頁、上傳、位置、電話、分享，購物車等各式各樣的圖標。如果每個圖標都發送一次http請求的話，這會較大的影響前端性能。通常會將所有圖標整合到一起，只佔用一個http請求。整合的方式有CSS sprite和iconfont。
CSS sprite的原理其實很簡單，就是把所有用到的圖標拼接到同一張png圖片裡，給圖標元素設置背景圖片，並通過CSS調整元素的background-position屬性，使同一張背景圖的不同部位在不同的元素中展現。要注意的是，元素的background-size設置的值應該和元素的大小成一定的倍數關係。比如設置了圖標元素的寬高是40px，而png裡每個圖標的大小是80*80，這時候background-size應該是"50% auto"。為什麼我們在合併圖標的時候要做大一點呢？因為在手機上用，而手機通常是2倍屏、2.5倍屏，甚至3倍屏，按照一定的比例做大一點，這樣在手機上用才不會發虛。
iconfont，簡單的說就是通過CSS的@font-face引入一套自定義的字體，並命名該字體。在自定義的字體內部，圖標和某個字符串碼是一一對應的，所以如果某個元素想設置為某個圖標，在元素內輸入該圖標對應的字符串碼，並設置該元素的font-family為引入的字體名稱。由於要記住每個圖標對應的字符串碼很不方便，所以通常會 通過元素的:before偽元素來實現，":before"的content設置為對應圖標的字符串碼即可，這樣我們就可以通過為元素添加類名來實現展示圖標。
以上的任何一種整合方式，都有自身的缺點，CSS sprite無法更改圖標顏色，同一個圖標的不同顏色要一起整合進去。同時要增加圖標比較麻煩，維護困難。iconfont要為不同的瀏覽器準備不同格式的字體，同時增加圖標時也很不方便。
最近看了一些這方面的文章，大家都認為SVG sprite會是主流。簡單的說，這種方式是通過svg來繪製圖標，每一個圖標一個path，並用symbol標籤包裹，使其不顯示。在用到的時候，再通過use標籤引用。如果不需要考慮ie瀏覽器的話，甚至都不需要在在html內引入所有的svg代碼，通過svg的use標籤的xlink:href=“test.svg#icon”以文件名+id的方式引用單個圖標。
svg sprite的處理方式，引入的是矢量圖標，可以無限放大，並且可以精細的控制圖標的每一個線條，讓圖標內部的顏色可以不一樣，增減圖標也相較於前兩種要方便不少。如果每個圖標的svg代碼量太多的話，可以找一些工具進行適當的壓縮，刪除不必要的屬性，並對path內的座標值保留2-3位小數即可。唯一的缺憾在於兼容性上，只有ie9+和現代瀏覽器可以使用這種方式，要兼容ie8及以下的話，還是考慮前兩種方式吧。
說到兼容問題，上週去一個公司面試前端崗位，一個小姑娘面的我，說他們做的是政府和事業單位的外包項目，要求兼容ie6，要求兼容ie6，要求兼容ie6.......一些機關單位的網站長得那麼醜不是沒有道理的，哈哈哈。
阿里的iconfont.cn上有大量的圖標，並且提供png、svg、ai幾種下載格式，在下載的代碼中用iconfont和svg sprite的使用demo，上面明確說了推薦svg的方法。
閱讀更多 學無止境當讀書 的文章
