圖標字體的優缺點和使用

圖標字體的優勢和劣勢

優勢

1. 輕量級：一個圖標字體要比一系列的圖像要小。一旦字體加載了，圖標就會馬上渲染出來，不需要下載一個個圖像。這樣可以減少HTTP的請求數量，而且和HTML5的離線存儲配合，可以對性能做出優化。

2. 靈活性：不調字體可以像頁面中的文字一樣，通過font-size屬性來對其進行大小的設置，而且還可以添加各種文字效果，如color、hover、filter、text-shadow、transform等效果。靈活的簡直不像話！

3. 兼容性：圖標字體支持現代瀏覽器，甚至是低版本的IE瀏覽器，所以可以放心的使用它。

4. 相比於位圖放大圖片會出現失真、縮小又會浪費掉像素點，圖標字體不會出現這種情況。

劣勢

1. 圖標字體只能被渲染成單色，或者是CSS3的漸變色

2. 版權上也有着對應的限制，當然還是有很多免費的圖標字體可以供我們下載。

3. 當自己創作圖標字體的時候，是比較耗費時間的，重構人員的後期維護成本也比較高

圖標字體的製作

1. 網址：https://icomoon.io

2. 點擊左上角的IcoMoon App

3. 進入之後點擊Import Icons把SVG圖片上傳上去

4. 全選上傳上去的圖片，點擊右下角的Generate Font

5. 每個項目下都會有一個Get Code按鈕，點擊它會出現一個使用方法的彈窗

6. 點擊左上角的Preferences，在Font Name中設置生成字體的名稱

7. 設置好之後，關閉彈出窗口，點擊右下角的Download按鈕進行下載

8. 打開下載好的壓縮包，把fonts目錄下的文件拷貝到任意目錄下。之後就可以通過之前Get Code按鈕下提供的使用方法進行使用。