圖標字體化淺談

           在做手機端Web App項目中,經常會遇到小圖標在手機上顯示比較模糊的問題，經過實踐發現了一種比較好的解決方案，圖標字體化。

           在微社區項目中，有很多小的Icon（圖標），如分享、回復、贊、返回、話題、訪問、箭頭等，這些Icon（圖標）一般都是純色的。開始制作時考慮用雙倍大小的Sprite圖，通過CSS樣式設置只顯示二分之一尺寸，這樣在Retina屏上顯示的大小是正常的，一旦放大屏幕後圖標又變得模糊不清，測試的效果不是很理想，後來又考慮多套圖標適配方案、SVG矢量圖等，都因為種種原因放棄掉了（如多套圖標繁瑣、Android 2.3不支持SVG格式等），為了解決以上問題，用到了圖標字體， 通過查閱Icon Font相關技術博客和文章，並結合在項目中實際應用梳理出了圖標字體化淺談這篇文章，望對正在學習和使用的重構同學們有一個參考和幫助！文章內的內容參考了相關技術文章並加上自已的理解，錯誤在所難免，歡迎批評指正。下圖為微社區用到的部分圖標字體。

使用圖標字體的優勢和劣勢

字體圖標除了圖像清晰度之外，比位圖還有哪些優勢呢?
1、輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會馬上渲染出來，不需要下載一個圖像。可以減少HTTP請求，還可以配合HTML5離線存儲做性能優化。



2、靈活性：圖標字體可以用過font-size屬性設置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。可以在任何背景下顯示。使用位圖的話，必須得為每個不同大小和不同效果的圖像輸出一個不同文件。



3、兼容性：網頁字體支持所有現代浏覽器，包括IE低版本。



除了以上優勢之外，當然也有劣勢
1、圖標字體只能被渲染成單色或者CSS3的漸變色，由於此限制使得它不能廣泛使用。
2、使用版權上有限制，有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。
3、創作自已的字體圖標很費時間，重構人員後期維護的成本偏高。

如何獲取圖標字體及使用

要想獲取圖標字體，不外乎兩種途徑，其一找到付費網站購買，其二就是到免費網站下載，提供免費下載網站很多，神飛曾經發表過一篇博客icon font大搜羅，上面羅列好多的免費網站的地址，大家有興趣可以去下載。如何使用呢？一般來說，有3種方法：
1、把字符直接寫在HTML文件裡；
這個方法是簡單比較直觀，見如下代碼，用一個<span>元素去包含一個字符“!”(或&#x0021;)，然後給這個<span>添加一個類。這個字母在選定的字體中被映射到一個特定的圖標。

<a href=”javascript:;”><span cass=”icon”>!</span>贊</a><a href=”javascript:;”>

<span cass=”icon”>&#x0021;</span>贊</a>

為了顯示效果，還需要編寫樣式類.Icon來決定此字符以哪種字體來顯示，如下：

.icon {font-family: ‘ your-incofont -name ‘;}

2、使用css來生成內容；

它不直接在HTML文件裡添加字符，而是用CSS來生成字符內容。代碼如下

<a href=”javascript:;” class=”icon praise”>贊</a>

可以看出，添加了一個類名“praise”。神奇的事就發生在CSS中，跟上面一樣，第一步先定義好字體，然後使用:before偽元素來產生字符圖標，其中“before”表示字符出現在左邊，“after”則出現在右邊。

.icon {font-family:’ your-incofont-name’ ;}.praise:before {content: “f00a”; }

3、用data-icon屬性

還有一種跟上面相似方法是使用HTML5的“data-”屬性。如：創建一個data-icon屬性。
aria-hidden=”true”是為了防止被閱讀器直接把字符讀取出來，不是對所有的平台都奏效。

<a href=”javascript:;”><span aria-hidden=”true” data-icon=”!”></span>贊</a>

結合一些搭配使用的CSS屬性，可以寫成如下代碼

[data-icon]:before {font-family: ‘ your-incofont-name’; content: attr(data-icon);speak:none;}

制作自已圖標字體

以上是免費圖標字體使用的幾種方法，下面看看如何制作屬於自己的圖標字體。

1、首先需要有創建矢量圖標的軟件，並且能夠輸出SVG格式，比如“Illustrator”或者“Inkscape”。也可以用Photoshop的路徑工具畫出所需要的圖標，然後導出路徑到Illustrator裡去填色。 下圖為Adobe Illustrator軟件。



注意一定是封閉的路徑，不能是單路徑描邊，如果是單路徑的話生成字體圖標後會顯示不出來。兩個以上的圖形要合並、圖形盡減少節點使用。如下圖，中間的圖(嘴巴部分)為單路徑描邊（不封閉）,導入圖標生成器後會如右圖所示，嘴巴部分顯示不出來。



2、圖標制作完成後，選擇 “文件”菜單中“保存”，把文件保存成“SVG”格式。使用默認的SVG設置。
3、把SVG格式的圖標導入到icomoon、fontello、iconfont字體生成器中，去生成所要的圖標字體，以下介紹一下幾種字體生成器的用法：
（1）圖標字體生成器http://icomoon.io/app/
IcoMoon！一個可以通過個性化設置來創建自定義圖標（字體）的生成器！IcoMoon是一項免費的服務，通過使用不同設置使我們能夠創建自定義的Icon圖或Icon字體。除了自定義Icon外，IcoMoon也有自己免費的海量圖標集，都非常贊。
打開地址，點擊Start the App按鈕。



點擊Import Icons按鈕導入SVG圖標，導入後對圖標進行相關的操作，如選中、刪除、移動、編輯等。



編輯完成後，就可以進行下載了，它提供兩種下載方式：圖片版和字體版！圖片版是經過CSS Sprites技術處理的PNG格式，字體版有多種格式供我們選擇（EOT,SVG,WOFF,TTF）。



如果要兼容IE7以下浏覽器，請在設置裡勾選Support IE7(and older)選項，會生成一個單獨JS、CSS文件。



下載ZIP包後，解壓後會得到如下圖的文件。將fonts文件夾復制到你的網站，為項目添加字體。
從style.css文件中復制CSS樣式，並粘貼到你網站的CSS文件中，也可以單獨存成一個樣式文件。



復制完成後，在CSS文件中找到@font-face，將URL路徑修改成你本地的相對路徑。



字體和路徑都設置完成後，在HTML頁面只需調用相對應的class就可以了。如果想兼容IE7浏覽器，需引用IE7目錄的js。如：

調用class：<span class=”icon icon-add”></span>
調用js：<script src=”ie7/ie7.js”></script>

它的生成方式與上面的類同，這裡不做介紹，很容易上手。



（3）ISUX矢量字體圖標庫http://font.isux.us/

ISUX矢量字體庫目前提供了豐富的字體圖標，可以供下載使用，暫時還不支持自定義圖標的導入，期待不久的將來它的功能會越來越完善。大家有什麼好的建議和想法可以聯系他們。



通過以上幾種生成器的生成圖標字體，加上用CSS對其