在做PC端/手機端Web項目中，我們會經常遇到圖標以何種形式在服務器上存在並在前端顯示的問題。比如之前比較流行使用SVG顯示icon。

另外，現在移動端web app越來越流行，但是圖標在手機上顯示會比較模糊，現在有很多小的Icon，如分享、回復、贊、返回、話題、訪問、箭頭等，這些Icon一般都是純色的。

開始制作時可以考慮使用雙倍大小的Sprite圖（雪碧圖），通過CSS樣式設置只顯示二分之一尺寸，這樣在Retina屏上顯示的大小是正常的，一旦放大屏幕後圖標又變得模糊不清，測試的效果不是很理想；

後來又考慮多套圖標適配方案、SVG矢量圖等，都因為種種原因不理想（如多套圖標繁瑣、Android 2.3不支持SVG格式等）

現在，介紹當下首選的以及最流行的方法：圖標（icon）字體化

首先，我在一個web項目中，有這樣一個目錄文件：static/fonts/icomoon.eot、static/fonts/icomoon.svg、static/fonts/icomoon.ttf、static/fonts/icomoon.woff

上面四個文件就是圖標字體化

eot：IE瀏覽器所需圖標格式

svg：更高版本瀏覽器所需圖標格式

ttf：Firefox瀏覽器所需圖標格式

woff：IE瀏覽器所需圖標格式

優缺點：

1. 圖標清晰

2. 輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會馬上渲染出來，不需要下載一個圖像。可以減少HTTP請求，還可以配合HTML5離線存儲做性能優化

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

4.兼容性：網頁字體支持所有現代瀏覽器，包括IE低版本。詳細兼容性可以點擊這裏

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

神奇的圖標字體化！