之前發(fā)表過一篇關(guān)于iconfont圖標(biāo)字體的相關(guān)教程，以文字的方式，實(shí)現(xiàn)網(wǎng)頁中的圖標(biāo)和特殊字符。教程鏈接可參考：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950
iconfont官網(wǎng)：http://www.iconfont.cn/plus
前段時(shí)間去iconfont官網(wǎng)逛逛，發(fā)現(xiàn)iconfont已經(jīng)升級iconfont+了，對比起之前的iconfont，iconfont+最大的特點(diǎn)是什么呢？iconfont+開始支持彩色圖標(biāo)了，對于此項(xiàng)新的改進(jìn)，官網(wǎng)是如此介紹的：
symbol引用:
這是一種全新的使用方式，應(yīng)該說這才是未來的主流，也是平臺目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實(shí)是做了一個(gè)svg的集合，與另外兩種相比具有如下特點(diǎn)：
支持多色圖標(biāo)了，不再受單色限制。
通過一些技巧，支持像字體那樣，通過font-size,color來調(diào)整樣式。
兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
瀏覽器渲染svg的性能一般，還不如png。
這種全新的使用方式，據(jù)官網(wǎng)介紹說是做了一個(gè)svg的集合，SVG（Scalable Vector Graphics）可縮放矢量圖形，SVG具有什么特點(diǎn)呢?
SVG特點(diǎn)：
1．任意放縮。（用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細(xì)節(jié)等。）
2．文本獨(dú)立。（SVG圖像中的文字獨(dú)立于圖像，文字保留可編輯和可搜尋的狀態(tài)。也不會再有字體的限制，用戶系統(tǒng)即使沒有安裝某一字體，也會看到和他們制作時(shí)完全相同的畫面。）
3．較小文件。（總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。）
4．超強(qiáng)顯示效果。（SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。）
5．超級顏色控制。（SVG圖像提供一個(gè)1 600萬種顏色的調(diào)色板，支持ICC顏色描述文件標(biāo)準(zhǔn)、RGB、線X填充、漸變和蒙版。）
由于svg的格式優(yōu)點(diǎn)是基于xml可擴(kuò)展標(biāo)記語言，是一個(gè)XML文件，而且SVG是被設(shè)計(jì)用于互聯(lián)網(wǎng)，所以通過Javascript和DOM訪問它就是最重要的應(yīng)用模式。通過Javascript和DOM可以動態(tài)地修改HTML，同樣也可以在瀏覽器中動態(tài)地創(chuàng)建、修改和刪除圖片。
因此在網(wǎng)頁中使用svg與其他圖像格式相比（比如 JPEG 和 GIF）的優(yōu)勢在于:
SVG 圖像可通過文本編輯器來創(chuàng)建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
SVG 可在圖像質(zhì)量不下降的情況下被放大
而瀏覽器的支持情況，iconfont官網(wǎng)也有說明：
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內(nèi)聯(lián) SVG。Internet Explorer 8或更早版本，可通過安裝Adobe SVG Viewer以支持SVG。
iconfont官網(wǎng)描述瀏覽器渲染svg的性能一般，還不如png，實(shí)測了一下做了幾個(gè)彩色小icon，現(xiàn)代瀏覽器對svg渲染其實(shí)也相當(dāng)不錯(cuò)了。而且iconfont平臺也是推薦這種全新的使用方式，現(xiàn)在互聯(lián)網(wǎng)技術(shù)迅猛發(fā)展，相信不久的將來這種使用方式會是未來的主流。
介紹了那么多，那么來做個(gè)小案例體驗(yàn)一下。
首先還是到iconfont官網(wǎng)，這次找?guī)讉€(gè)彩色的圖標(biāo)：
網(wǎng)頁導(dǎo)航欄多色圖標(biāo)庫，點(diǎn)進(jìn)去會發(fā)現(xiàn)很多多色圖標(biāo)庫的集合：
找到對應(yīng)的圖標(biāo)保存到項(xiàng)目后，去圖標(biāo)管理—我的項(xiàng)目里面，找到新添加的項(xiàng)目并下載到本地，下載下來解壓后我們可以看到這些文件：
iconfont+除了全新的使用方式，傳統(tǒng)的使用方式也進(jìn)行了一些優(yōu)化，詳細(xì)可以參考demo文件：
首先第一個(gè)demo文件打開是font-class引用
font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。
與unicode使用方式相比，具有如下特點(diǎn)：
兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
相比于unicode語意明確，書寫更直觀。可以很容易分辨這個(gè)icon是什么。
因?yàn)槭褂胏lass來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用。
不過因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。
使用步驟如下：
（注意:為了瀏覽器更好的渲染，如果只使用單色圖標(biāo)，建議不要選擇下載多色圖標(biāo)替代）
第一步：引入項(xiàng)目下面生成的fontclass代碼：
<link rel="stylesheet" type="text/css" href="./iconfont.css">
(這種方式是需要引入iconfont.css文件，同時(shí)還需要注意字體文件的擺放路徑)
第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：
<i class="iconfont icon-xxx"></i>
實(shí)際情況中"iconfont"（font-family）需要修改為你項(xiàng)目下的font-family。可以通過編輯項(xiàng)目查看，默認(rèn)是"iconfont"。
iconfont.css源碼其實(shí)也是通過@font-face規(guī)則聲明字體，并引用字體文件，而字體編碼則是通過偽元素的方法添加進(jìn)html標(biāo)簽里面的，所以對于瀏覽器支持情況需要ie8+（下圖為添加字體編碼css樣式）
這種使用方式需要注意的地方也都提過了，有興趣的可以去親自體驗(yàn)一下。
最原始的的unicode使用方式的使用方法可參考上一個(gè)教程，教程鏈接：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950
現(xiàn)在來看一下全新的使用方式，symbol引用，其實(shí)這種方式使用起來也非常簡單。打開demo_symbol.html文件可以看到詳細(xì)的使用方法：
iconfont圖標(biāo)分別對應(yīng)不同的類名：
symbol引用：
使用步驟如下：
第一步：引入項(xiàng)目下面生成的symbol代碼：
<script src="./iconfont.js"></script>
(首先需要引入iconfont.js文件，此js文件相當(dāng)于是svg圖形集合文件的調(diào)用)
第二步：加入通用css代碼（引入一次就行）
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
實(shí)際情況中"iconfont"（font-family）需要修改為你項(xiàng)目下的font-family。可以通過編輯項(xiàng)目查看，默認(rèn)是"iconfont"。
使用多色圖標(biāo)引用效果：
可以看到瀏覽器渲染還是挺不錯(cuò)的，有興趣的可以自行體驗(yàn)一下，最后案例文件附上，使用的時(shí)候注意文件的擺放路徑。
來源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2763
