發現 圖標 渲染 很多 圖片緩存 sketch bsp size 前端

　 布吉島為啥起了個這麽文(dou)藝(bi)的名字，話不多說，開始總結??。

1??發展過程

1. 雪碧圖：

起初，大部分圖標都是用 img 來實現的。漸漸發現一個頁面的請求資源中圖片 img 占了大部分，所以為了優化有了image sprite 就是所謂的雪碧圖，就是將多個圖片合成一個圖片，然後利用 css 的 background-position 定位顯示不同的 icon 圖標。

但這個合成小圖片為雪碧圖的方式也有一個很大的痛點，維護困難。每新增一個圖標，都需要改動原始圖片，還可能不小心出錯影響到前面定位好的圖片，而且一修改雪碧圖，圖片緩存就失效了，久而久之就不知道該怎麽維護了。

2. Font Awesome：

後來漸漸地一個項目裏幾乎不會使用任何本地的圖片了，而使用一些 font 庫來實現頁面圖標。常見的如 Font Awesome ，使用起來也非常的方便，但它有一個致命的缺點就是找起來真的很不方便，圖標少，定制性不友善。

3. iconfont：

iconfont 更加強大，它阿裏做的開源圖庫，還有專門的 github issue，圖標數量很多，不僅有幾百個公司的開源圖標庫，還有各式各樣的小圖標，還支持自定義創建圖標庫 ，給前端開發帶來了很大便利。

2??iconfont的3種使用方式

1. unicode: 優勢： 兼容性最好，支持ie6以上。並且能按照字體的方式調整圖標大小，顏色。 劣勢： 不支持多色圖標。在不同設備的瀏覽器渲染會有差別，圖標顯示的位置，大小可能受css影響，不好調整。書寫不直觀，語意不明確。 使用方法：引入自定義字體 `font-face；定義使用iconfont的樣式；挑選相應圖標並獲取字體編碼，應用於頁面 2. font-class: 特點： 兼容性良好，支持ie8+，相比於unicode語意明確，書寫更直觀 使用方法：拷貝項目下面生成的fontclass代碼; 挑選相應圖標並獲取類名，應用於頁面 主要原理：其實是和 unicode 一樣的，它只是多做了一步，將原先&#xe604這種寫法換成了.icon-QQ，它在每個 class 的 before 屬性中寫了unicode,省去了人為寫的麻煩。如 .icon-QQ:before { content: "\e604"; } 坑： 一個項目中用到了兩組font-class，一定要註意命名空間的問題。 3. symbol: 支持多色圖標；支持font-size調整樣式；支持ie9+；可用css實現動畫；減少http請求；矢量，縮放不失真 ；可以精細控制SVG圖標部分細節 使用svg-icon的好處：再也不用發送woff|eot|ttf| 這些很多個字體庫請求了，svg都可以內聯在html內。 使用方法： 第一步：拷貝項目下面生成的symbol代碼，引入 ./iconfont.js；加入通用css代碼（引入一次就行）；挑選相應圖標並獲取類名，應用於頁面 擴展：svg 是一個真正的矢量，不管你再怎麽的放縮它都不會失真模糊，現在ui設計師平時都喜歡使用 sketch 來工作，只要輕松一鍵就能導出 svg 了，所以 svg 也更受設計師的青睞。

參考文檔： iconfont Font Awesome 未來必熱：SVG Sprite技術介紹

icon 的前生今世 & iconfont 的晉級之路