爲何咱們放棄css sprite使用iconfont字體圖標

說在開頭

  前面有一篇博客說道，項目中使用壓縮和css sprite技術對圖標進行分類和組合；

  但隨着項目的不斷完善，咱們也遇到了不少問題：

  1.如何對圖標進行分類；剛開始還比較好，咱們對圖標進行分類，大概有銀行卡圖標一類，增刪改圖標一類，支付類 型一類，等等。但隨着，圖標的不斷增長和業務直接的交叉，發現分類變得很困難，漸漸失去耐心。若是，把全部圖標集成到一張圖；可是有這樣一種狀況：有些頁面只使用了一個圖標，同時用戶只在這個頁面進行操做；卻要下載一整張大圖，浪費資源。

  

  2.排版不容易控制，致使使用時圖標位置很差控制，由於圖標的大小不同，很難使全部圖標按照必定的規律排列；並且，更加痛苦的是，不少時候爲了background-position:定位準確，特別保證鼠標hover效果的圖片區域和默認圖片的區域徹底重合；咱們經常會1px 1px的嘗試，調整。眼睛都看花了。

諸以下圖：

   3.不利於維護 新增圖標不得不修改真個圖，有時候爲了保證某一類型的在一塊區域，不得不調整其餘圖標的位置。

  4.放大圖標，會失真，模糊。

因此，咱們決定放棄css sprite

---

重點，重點

爲何選擇iconfont

  1.兼容性良好。如今主流瀏覽器（包括IE6）都支持CSS3的自定義字體(@font-face)，所以能夠嘗試使用font來替換圖片展現網站的各類icon。

    2.使用方便；開發人員直接調用樣式，不用爲了background-position:準肯定位看瞎眼睛。

    3.利於維護，新增，修改，刪除圖標方便，各個圖標之間相對獨立。

    4.體積很小,請求速度快，能夠帶來比較好的用戶體驗。

    5.矢量圖，放大，拉伸不會失真。

  有些人，可能會以爲字體圖標過於單調，在動畫，過渡，陰影方面顯得吃力；可是，在我看來這些效果並不能對用戶體驗形成很大影響；相反，字體的體積小，頁面加載快；hover,mouse事件時，切換效果很順暢；反而能提升用戶體驗。

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

    生成圖標的過程我就略過了這個須要跟UI協同合做，建議使用FontCreator，推薦一篇博客 http://www.uisdc.com/learning-icon-font

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

首選利用font-face獲取字體文件

@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* 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- */
}

從網上，找了一下目前主流瀏覽器對於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.直接使用字體圖標對應的編碼

 <i class="icon iconfont">&#xe670;</i>
                    <div class="name">下載</div>
                    <div class="code">&amp;#xe670;</div>
                    <div class="fontclass">.xiazai</div>
                </li>

咱們不建議，這樣作，由於這個咱們須要記住編碼；並且看代碼時候，不能知道這個圖標的含義

2.經過僞類：（建議用這個，不用記憶，看代碼時，也能知道圖標意思）

<i class="icon iconfont icon-xiazai"></i>
                    <div class="name">下載</div>
                    <div class="code">&amp;#xe670;</div>
                    <div class="fontclass">.xiazai</div>
                </li>

對應的樣式以下：

.icon-xiazai:before { content: "\e670"; }
.icon-yixuan:before { content: "\e671"; }

這樣咱們就能夠把這些圖標當文字控制

好比：color,font-size屬性就可使用了。鼠標的hover,mouseove，click等事件改變顏色，大小就顯得容易了。

---

說在最後

 想寫這篇文章好久了，終於加班完成了。

 注意：附件爲，咱們的字體圖標庫。