說在開頭
  前面有一篇博客說道，項目中使用壓縮和css sprite技術(shù)對圖標(biāo)進(jìn)行分類和組合；
  但隨著項目的不斷完善，我們也遇到了很多問題：
  1.如何對圖標(biāo)進(jìn)行分類；剛開始還比較好，我們對圖標(biāo)進(jìn)行分類，大概有銀行卡圖標(biāo)一類，增刪改圖標(biāo)一類，支付類 型一類，等等。但隨著，圖標(biāo)的不斷增加和業(yè)務(wù)直接的交叉，發(fā)現(xiàn)分類變得很困難，漸漸失去耐心。如果，把所有圖標(biāo)集成到一張圖；但是有這樣一種情況：有些頁面只使用了一個圖標(biāo)，同時用戶只在這個頁面進(jìn)行操作；卻要下載一整張大圖，浪費資源。
 
  2.排版不容易控制，導(dǎo)致使用時圖標(biāo)位置不好控制，因為圖標(biāo)的大小不一樣，很難使所有圖標(biāo)按照一定的規(guī)律排列；而且，更加痛苦的是，很多時候為了background-position:定位準(zhǔn)確，特別保證鼠標(biāo)hover效果的圖片區(qū)域和默認(rèn)圖片的區(qū)域完全重合；我們常常會1px 1px的嘗試，調(diào)整。眼睛都看花了。

3.不利于維護(hù) 新增圖標(biāo)不得不修改真?zhèn)€圖，有時候為了保證某一類型的在一塊區(qū)域，不得不調(diào)整其他圖標(biāo)的位置。

  4.放大圖標(biāo)，會失真，模糊。

所以，我們決定放棄css sprite
重點，重點
為什么選擇iconfont
   1.兼容性良好?，F(xiàn)在主流瀏覽器（包括IE6）都支持CSS3的自定義字體(@font-face)，因此可以嘗試使用font來替換圖片展示網(wǎng)站的各種icon。

    2.使用方便；開發(fā)人員直接調(diào)用樣式，不用為了background-position:準(zhǔn)確定位看瞎眼睛。
    3.利于維護(hù)，新增，修改，刪除圖標(biāo)方便，各個圖標(biāo)之間相對獨立。
    4.體積很小,請求速度快，可以帶來比較好的用戶體驗。
    5.矢量圖，放大，拉伸不會失真。

  有些人，可能會覺得字體圖標(biāo)過于單調(diào)，在動畫，過渡，陰影方面顯得吃力；但是，在我看來這些效果并不能對用戶體驗造成很大影響；相反，字體的體積小，頁面加載快；hover,mouse事件時，切換效果很順暢；反而能提高用戶體驗。

  下面分享一下目前項目中使用的iconfont實例；

    生成圖標(biāo)的過程我就略過了這個需要跟UI協(xié)同合作，建議使用FontCreator，

效果圖如下：（文章附件，會附上我們項目目前的字體圖片庫）

首選利用font-face獲取字體文件
@font-face {font-family: "iconfont";
  src=\'#\'" /* IE9*/
  src=\'#\'" /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
從網(wǎng)上，找了一下目前主流瀏覽器對于icon font的支持情況，如下：
IE：從IE4開始支持eot格式，IE9開始支持woff。
webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字體； Safari5.1+ 開始支持woff格式
Chrome：除webkit支持的以外，從Chrome 6開始，開始支持woff格式；
Firefox：支持.ttf和.otf，從Firefox 3.6開始支持woff格式；
Opera：支持.ttf、.otf、.svg。 Opera 11開始支持woff；
iPad, iPhone and Android 3.0+ 支持SVG fonts。

所以，為了保證兼容性，我們生成了:eot,.woff,avg等格式的字體文件

使用方式大概有兩種：
1.直接下字體圖標(biāo)對應(yīng)的編碼
 <i class="icon iconfont">&#xe670;</i>
                    <div class="name">下載</div>
                    <div class="code">&amp;#xe670;</div>
                    <div class="fontclass">.xiazai</div>
                </li>

我們不建議，這樣做，因為這個我們需要記住編碼；而且看代碼時候，不能知道這個圖標(biāo)的含義

2.通過偽類：（建議用這個，不用記憶，看代碼時，也能知道圖標(biāo)意思）
<i class="icon iconfont icon-xiazai"></i>
                    <div class="name">下載</div>
                    <div class="code">&amp;#xe670;</div>
                    <div class="fontclass">.xiazai</div>
                </li>
對應(yīng)的樣式如下：
.icon-xiazai:before { content: "\e670"; }
.icon-yixuan:before { content: "\e671"; }
這樣我們就可以把這些圖標(biāo)當(dāng)文字控制
比如：color,font-size屬性就可以使用了。鼠標(biāo)的hover,mouseove，click等事件改變顏色，大小就顯得容易了。