在作PC端/手機端Web項目中，咱們會常常遇到圖標以何種形式在服務器上存在並在前端顯示的問題。好比以前比較流行使用SVG顯示icon。前端
另外，如今移動端web app愈來愈流行，可是圖標在手機上顯示會比較模糊，如今有不少小的Icon，如分享、回覆、贊、返回、話題、訪問、箭頭等，這些Icon通常都是純色的。web
開始製做時能夠考慮使用雙倍大小的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.woffapp
上面四個文件就是圖標字體化移動端web
eot：IE瀏覽器所需圖標格式svg
svg：更高版本瀏覽器所需圖標格式性能
ttf：Firefox瀏覽器所需圖標格式測試
woff：IE瀏覽器所需圖標格式
優缺點：
1. 圖標清晰
2. 輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會立刻渲染出來，不須要下載一個圖像。能夠減小HTTP請求，還能夠配合HTML5離線存儲作性能優化
3. 靈活性：圖標字體能夠用過font-size屬性設置其任何大小，還能夠加各類文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。能夠在任何背景下顯示。使用位圖的話，必須得爲每一個不一樣大小和不一樣效果的圖像輸出一個不一樣文件
4.兼容性：網頁字體支持全部現代瀏覽器，包括IE低版本。詳細兼容性能夠點擊這裏
除了以上優點以外，固然也有劣勢一、圖標字體只能被渲染成單色或者CSS3的漸變色，因爲此限制使得它不能普遍使用。二、使用版權上有限制，有好多字體是收費的。固然也有不少免費開源的精美字體圖標供下載使用。三、創做自已的字體圖標很費時間，重構人員後期維護的成本偏高。