一、IconFont的優(yōu)點(diǎn)

1、輕量性

可以減少http請求，可以配合html5離線存儲做性能優(yōu)化，有利于后期維護(hù)。

2、靈活性

可以自由變換IconFont大小（不失真），可以修改IconFont顏色，可以添加陰影，旋轉(zhuǎn)，透明度等視覺效果。

3、兼容性

圖標(biāo)字體IconFont支持所有現(xiàn)代瀏覽器，包括IE低版本。

二、IconFont的缺點(diǎn)

1、圖標(biāo)字體只能被渲染成單色或者css3的漸變色；

2、設(shè)計(jì)自已的IconFont需要花費(fèi)大量時間，也會增加前端重構(gòu)的成本；

3、Firefox和IE9不支持對IconFont圖標(biāo)字體的跨域訪問。

三、如何制作IconFont？

1、制作IconFont矢量文件的要求

按照圖標(biāo)制作說明，設(shè)計(jì)師制作一個一個的AI矢量圖，存儲為SVG格式，這里提醒，不要把所有圖標(biāo)做在一張矢量文件上。

2、如何上傳SVG？

如果你有阿里內(nèi)部賬號，或者新浪微博賬號，登錄進(jìn)去，即可在http: //iconfont.cn/網(wǎng)站上傳SVG。可以單個上傳，也可以批量上傳。填寫每個圖標(biāo)的名稱和Tag，點(diǎn)擊確認(rèn)，接著繼續(xù)上傳圖標(biāo)，或者完成上傳。這里需要強(qiáng)調(diào)的是，在上傳SVG前，最好能給每個SVG取唯一的英文名，該英文名字表示SVG圖標(biāo)的含義。這樣做的好處是，在上傳圖標(biāo)時，不用再修改圖標(biāo)名稱和Tag了，直接默認(rèn)為SVG的英文名。

3、如何申請個人圖標(biāo)庫？

湊夠50個上傳的圖標(biāo)，你就可以申請個人圖標(biāo)庫啦。主要包括給圖標(biāo)庫取名，tag用”, ”分隔，介紹圖標(biāo)庫等步驟。

在【上傳圖標(biāo)】界面，可以對每個圖標(biāo)進(jìn)行編輯，刪除，下載。

在編輯彈出框中，可以修改圖標(biāo)名稱，Tag，圖標(biāo)fontClass（前端要用）

在下載彈出框中，可以下載該圖標(biāo)對應(yīng)的SVG，AI，PNG等格式文件。

如果你是純前端工程師，不會使用AI畫矢量圖，合作的設(shè)計(jì)師之前也沒做過IconFont矢量圖，你依然可以擁有自己的個人圖標(biāo)庫。

首先，在【官方公開庫】或【所有公開庫】中，隨意打開一個圖標(biāo)庫，你可以對該庫中的每個圖標(biāo)進(jìn)行加入購物車，收藏，下載等操作。

如果你收藏了某個圖標(biāo)，在【收藏圖標(biāo)】界面，你會發(fā)現(xiàn)你收藏的圖標(biāo)有購物車滿了，刪除，下載等操作。

不管是在【公開庫】界面，還是【收藏圖標(biāo)】界面，你都可以下載喜歡的圖標(biāo)對應(yīng)的SVG格式，然后重命名，再上傳。

四、項(xiàng)目圖標(biāo)管理和下載多格式文件

點(diǎn)擊圖標(biāo)，你會看到圖標(biāo)飛入暫存架。暫存架里面有‘存儲為項(xiàng)目’，‘下載至本地‘，前者可為【項(xiàng)目圖標(biāo)管理】做準(zhǔn)備，后者用于【下載多格式文件】，為前端寫頁面做準(zhǔn)備。

1、關(guān)于項(xiàng)目圖標(biāo)管理

如果你在暫存架中，點(diǎn)擊“存儲為新項(xiàng)目“，輸入項(xiàng)目名，即可在項(xiàng)目管理面板看到你的圖標(biāo)項(xiàng)目。如果選擇把文件存放在你的服務(wù)器上，可以不用項(xiàng)目圖標(biāo)管理功能；如果選擇把文件托管在http://iconfont.cn/平臺，可以獲取在線鏈接，就是iconfont.css 引用iconfont.eot，iconfont.svg，iconfont.ttf，iconfont.woff四個字體文件相關(guān)鏈接。兩者的區(qū)別在于鏈接地址，前者是文件所在文件夾的相對路徑或者文件所在服務(wù)器的絕對路徑，后者是文件所在IconFont托管平臺的絕對路徑。

2、關(guān)于下載多格式文件

如果你在暫存架中，點(diǎn)擊“下載至本地“，你可以得到一個壓縮包。解壓后的文件夾一般包括demo.html，demo.css，iconfont.css，iconfont.eot，iconfont.svg，iconfont.ttf，iconfont.woff等7個文件。iconfont.css里面除了會引用iconfont.eot，iconfont.svg，iconfont.ttf，iconfont.woff四個字體相關(guān)文件，還包含你之前選擇的每個圖標(biāo)的樣式編碼。如果希望把字體文件單獨(dú)放在一個文件夾，需要在iconfont.css里面修改文件引用路徑。前端做頁面，如果要對圖標(biāo)進(jìn)行大小限制和顏色調(diào)整，需要在demo.css中另外寫樣式，接著應(yīng)用在demo.html頁面中。

五、如何引用IconFont？

寫頁面時，前端有兩種引用方式：

1、標(biāo)簽內(nèi)寫編碼；
<i class="iconfont">&#xe6b8;</i>
2、標(biāo)簽類名內(nèi)加該圖標(biāo)類。
<i class="icon  iconfont"> </i>

六、使用問題總結(jié)

1、字體圖標(biāo)在Safair或Chrome瀏覽器下被加粗

以上現(xiàn)象是由于字體圖標(biāo)存在半個像素的鋸齒，在瀏覽器渲染的時候直接顯示成一個像素，導(dǎo)致在有背景下的圖標(biāo)顯示感覺加粗，解決方案是：對圖標(biāo)樣式進(jìn)行抗鋸齒處理，.iconfont {-webkit-font-smoothing: antialiased;}

2、字體圖標(biāo)在IE7瀏覽器中，圖標(biāo)右側(cè)出現(xiàn)小方框

解決方案是：在標(biāo)簽樣式中加入display: block;

3、字體圖標(biāo)在pc端的chrome瀏覽器下出現(xiàn)嚴(yán)重的鋸齒

解決方案是：對字體圖標(biāo)的邊緣進(jìn)行模糊。

七、使用iconfont流程圖（有4種入口可以把字體圖標(biāo)加入暫存架）

這里留一個思考題，大家共同學(xué)習(xí)。為何下載包里面的svg打開后無圖案？不管是用瀏覽器，還是用我筆記本上的AI軟件，打開后，都是空白，無圖案。