在做手機端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>

（2）圖示字型生成器http://fontello.com/

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

（3）ISUX向量字型圖示庫http://font.isux.us/

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

通過以上幾種生成器的生成圖示字型，加上用CSS對其大小、顏色、透明度、陰影、Transition各種變換等控制，不僅可以縮放自如，製作出各種特殊效果，而且還很容易維護，可以通過多種不同的途徑對它們進行操作。相信大家已經體驗到他的強大之處，滿足日常工作需要應該已經足夠了。雖然有這麼多優點，但圖示字型並不是完美的，也存在些缺點。如：只能被渲染成單色的問題、螢幕閱讀器(雖然有解決方法，但並不完善)的問題、效能問題等等， 等待著我們去發現和解決。相信未來會有更好的解決方案，比如：SVG（可伸縮向量圖形），未來可能取代點陣圖的圖形技術等。
立足現在，放眼未來。最後對目前的圖示字型生成器工具做一下展望吧！
■ 能夠支援匯入更多的自定義格式，如EPS、AI等格式。
■ 能夠引入專案管理的機制， 在同一帳號可以同時管理多個專案圖示。
■ 提供更多免費、豐富的圖示字型供下載使用。

FAQ

1、跨域問題：
（1）通過配置自己的伺服器。
# For Apache
<FilesMatch “.(eot|ttf|otf|woff)”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>
# For nginx
location ~* .(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
（2）放在同一個域下。
（3）使用base64置入CSS中(Icomoon在匯出圖示時，設定裡勾選Encode & Embed Font in CSS選項)。
2、字型圖標出現鋸齒的問題：
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
3、@font-face與效能：
關於@font-face的效能問題，可以參考以下文章。
原文地址：http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
翻譯地址：http://www.cnblogs.com/demix/archive/2009/11/28/1612715.html
文章內的建議和總結:
（1）只在你確定你非常需要 @font-face的時候才使用它;
（2）將你的@font-face定義在所有的script標籤前;
（3）如果你有許多字型檔案，考慮將它們分散到幾個域名下;
（4）不要包含沒有使用的 @font-face宣告——IE將不分它使用與否，通通載入;
（5）Gzip字型檔案，同時給它們一個未來的過期頭部宣告;
（6）考慮字型檔案的後加載，起碼對於IE。

轉自騰訊ISUX:http://isux.tencent.com/icon-font.html