如何使用IconFont？——矢量圖標

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【如何使用IconFont？——矢量圖標】

 

1.背景介紹

網上的一些小圖標除了可使用css精靈圖製做外，還可使用如今比較熱門的iconfont去製做。那麼首先搞清楚一個問題，什麼是iconfont？icon font顧名思義，能夠理解成icon + font即 圖標字體。圖標字體，能夠理解爲是一種特殊的字體，網頁中的一些小圖標和特殊字符能夠經過這種方法實現。簡單來講就是把圖片當成文字來使用。

2.知識剖析

2.1什麼是iconfont？

iconfont，字體圖標。經過使用字體格式的矢量圖標來代替以往的圖片格式的小圖標。字體是矢量化圖形，它天生具備「分辨率無關」的特性，在任何分辨率下面，均可以作到完美縮放和擴大，不會像傳統圖片同樣，增大到必定程度就會出現明顯的鋸齒或者變得模糊，影響展現效果。

 

 

2.2 如何使用icon font？

提供icon font的網站有不少，例如阿里巴巴矢量圖標庫、fontello、icomoon、Font-Awesome、Glyphicon Halflings、Icons八、

咱們今天主要就國內使用最多的阿里巴巴矢量圖標庫進行介紹。

在阿里巴巴矢量圖標庫中，在web端有四種主要的引用方式，分別是icon單個使用、unicode引用、font-class引用、symbol引用。

icon單個使用，單個圖標用戶能夠自行選擇下載不一樣的格式使用，包括png,ai,svg。此種方式適合用在圖標引用特別少，之後也不須要特別維護的場景。

好比設計師用來作demo原型。

前端臨時作個活動頁。

固然若是你只是爲了下載圖標作PPT,也是極好的。

不過若是是成體系的應用使用，建議用戶把icon加入項目，而後使用下面三種推薦的方式。

 

 

unicode引用，批量引用的方法之一，在網頁端最原始的應用方式。兼容性最好，支持ie6+，及全部現代瀏覽器。支持按字體的方式去動態調整圖標大小，顏色等等，因爲是字體，因此不支持多色。只能使用平臺裏單色的圖標，就算項目裏有多色圖標也會自動去色。

font-class引用，是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。支持ie8+，及全部現代瀏覽器。相比於unicode語意明確，書寫更直觀。能夠很容易分辨這個icon是什麼。使用class來定義圖標，當要替換圖標時，只須要修改class裏面的unicode引用就能夠，比較方便。多色圖標仍是不支持的。

symbol引用，是一種全新的使用方式，應該說這纔是將來的主流，也是平臺目前推薦的用法。支持多色圖標了，再也不受單色限制。支持 ie9+,及現代瀏覽器。瀏覽器渲染svg的性能通常，不如png。

3.常見問題

問題: 如何在項目中修改圖標的大小和顏色？

4.解決方案

使用一個demo進行演示講解：

demo

5.編碼實戰

6.擴展思考

問題: iconfont相比於各類圖片格式的小圖標的優勢和弊端？

優勢：

一、輕量性：一個圖標字體比一系列的圖像要小。一旦圖標字體加載了，圖標就會立刻渲染出來，不須要下載一個圖像。能夠減小HTTP請求，還能夠配合HTML5離線存儲作性能優化。

 

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

三、兼容性：網頁字體支持全部現代瀏覽器，包括IE低版本。詳細兼容性能夠點擊這裏。

 

弊端：

一、圖標字體只能被渲染成單色或者CSS3的漸變色，因爲此限制使得它不能普遍使用。（已經開始支持彩色圖標）

二、使用版權上有限制，有好多字體是收費的。固然也有不少免費開源的精美字體圖標供下載使用。

三、創做自已的字體圖標很費時間，重構人員後期維護的成本偏高。

7.參考文獻

參考一：分享國內外免費開源的iconfont圖標字庫

參考二:圖標字體運用以及其優點與劣勢

參考三：詳解CSS中iconfont的使用

參考四：阿里巴巴矢量圖標庫

 

 

「咱們相信人人均可以成爲一個工程師，如今開始，找個師兄，帶你入門，學習的路上再也不迷茫。

這裏是技能樹.IT修真院：http://www.jnshu.com，初學者轉行到互聯網行業的彙集地。"

歡迎加IT交流羣565734203與你們一塊兒討論交流