之前發表過一篇關于iconfont圖標字體的相關教程，以文字的方式，實現網頁中的圖標和特殊字符。教程鏈接可參考：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950

前段時間去iconfont官網逛逛，發現iconfont已經升級iconfont+了，對比起之前的iconfont，iconfont+最大的特點是什么呢？iconfont+開始支持彩色圖標了，對于此項新的改進，官網是如此介紹的：

symbol引用:

這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：

支持多色圖標了，不再受單色限制。

通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。

兼容性較差，支持 ie9+,及現代瀏覽器。

瀏覽器渲染svg的性能一般，還不如png。

這種全新的使用方式，據官網介紹說是做了一個svg的集合，SVG(Scalable Vector Graphics)可縮放矢量圖形，SVG具有什么特點呢?

SVG特點：

1．任意放縮。(用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。)

2．文本獨立。(SVG圖像中的文字獨立于圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。)

3．較小文件。(總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。)

4．超強顯示效果。(SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。)

5．超級顏色控制。(SVG圖像提供一個1 600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、線X填充、漸變和蒙版。)

由于svg的格式優點是基于xml可擴展標記語言，是一個XML文件，而且SVG是被設計用于互聯網，所以通過Javascript和DOM訪問它就是最重要的應用模式。通過Javascript和DOM可以動態地修改HTML，同樣也可以在瀏覽器中動態地創建、修改和刪除圖片。

因此在網頁中使用svg與其他圖像格式相比(比如 JPEG 和 GIF)的優勢在于:

SVG 圖像可通過文本編輯器來創建和修改

SVG 圖像可被搜索、索引、腳本化或壓縮

SVG 是可伸縮的

SVG 圖像可在任何的分辨率下被高質量地打印

SVG 可在圖像質量不下降的情況下被放大

而瀏覽器的支持情況，iconfont官網也有說明：

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 SVG。Internet Explorer 8或更早版本，可通過安裝Adobe SVG Viewer以支持SVG。

iconfont官網描述瀏覽器渲染svg的性能一般，還不如png，實測了一下做了幾個彩色小icon，現代瀏覽器對svg渲染其實也相當不錯了。而且iconfont平臺也是推薦這種全新的使用方式，現在互聯網技術迅猛發展，相信不久的將來這種使用方式會是未來的主流。

介紹了那么多，那么來做個小案例體驗一下。

首先還是到iconfont官網，這次找幾個彩色的圖標：

1478744887612514.png

網頁導航欄多色圖標庫，點進去會發現很多多色圖標庫的集合：

1478745068101688.png

找到對應的圖標保存到項目后，去圖標管理—我的項目里面，找到新添加的項目并下載到本地，下載下來解壓后我們可以看到這些文件：

1478745117687690.png

iconfont+除了全新的使用方式，傳統的使用方式也進行了一些優化，詳細可以參考demo文件：

首先第一個demo文件打開是font-class引用

font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。

與unicode使用方式相比，具有如下特點：

兼容性良好，支持ie8+，及所有現代瀏覽器。

相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。

因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。

不過因為本質上還是使用的字體，所以多色圖標還是不支持的。

使用步驟如下：

(注意:為了瀏覽器更好的渲染，如果只使用單色圖標，建議不要選擇下載多色圖標替代)

1478745329981511.png

第一步：引入項目下面生成的fontclass代碼：

(這種方式是需要引入iconfont.css文件，同時還需要注意字體文件的擺放路徑)

第二步：挑選相應圖標并獲取類名，應用于頁面：

實際情況中"iconfont"(font-family)需要修改為你項目下的font-family。可以通過編輯項目查看，默認是"iconfont"。

iconfont.css源碼其實也是通過@font-face規則聲明字體，并引用字體文件，而字體編碼則是通過偽元素的方法添加進html標簽里面的，所以對于瀏覽器支持情況需要ie8+(下圖為添加字體編碼css樣式)

1478745369133807.png

這種使用方式需要注意的地方也都提過了，有興趣的可以去親自體驗一下。

現在來看一下全新的使用方式，symbol引用，其實這種方式使用起來也非常簡單。打開demo_symbol.html文件可以看到詳細的使用方法：

iconfont圖標分別對應不同的類名：

1478745448110204.png

symbol引用：

使用步驟如下：

第一步：引入項目下面生成的symbol代碼：

(首先需要引入iconfont.js文件，此js文件相當于是svg圖形集合文件的調用)

第二步：加入通用css代碼(引入一次就行)

.icon {

width: 1em; height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

第三步：挑選相應圖標并獲取類名，應用于頁面：

實際情況中"iconfont"(font-family)需要修改為你項目下的font-family。可以通過編輯項目查看，默認是"iconfont"。

使用多色圖標引用效果：

1478745489786147.png

可以看到瀏覽器渲染還是挺不錯的，有興趣的可以自行體驗一下，最后案例文件附上，使用的時候注意文件的擺放路徑。

來源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2763

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的iconfont在html种颜色,iconfont+开始支持彩色图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。