摘要：所以實現(xiàn)小圖標(biāo)時雪碧圖跟圖標(biāo)字體會在一個網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時，且太復(fù)雜圖標(biāo)無法實現(xiàn)請往下看開發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計本文對應(yīng)源碼源碼地址演示地址

之前寫了一篇關(guān)于雪碧圖的博文， 評論里有說用http2、或用SVG也有說用圖標(biāo)字體代替，大家知識面是挺廣，但深入了解技術(shù)點的似乎卻不多，否則不會有雪碧圖過時無用，用http2或圖標(biāo)字體取代就好了的想法；http2后續(xù)有時間再寫一篇個人實踐、理解博文， 本文主要講圖標(biāo)字體（iconfont）技術(shù)點，從實踐開發(fā)角度講述個人對圖標(biāo)字體的理解。

一般我們項目決定要使用一個技術(shù)點前，會查相關(guān)資料對其有大概的理解。例如， 這次要使用iconfont實現(xiàn)功能， 理解相關(guān)資料后歸納、總結(jié)出它的優(yōu)、缺點以及它的使用場景。

圖標(biāo)字體優(yōu)、缺點：

1.優(yōu)點；

輕量（文件體積?。?、靈活（樣式可改變圖標(biāo)）、兼容性好（IE8+）。

2.缺點；

圖標(biāo)只能單色調(diào)（太復(fù)雜的多色圖標(biāo)無法實現(xiàn)）、生成圖標(biāo)字體相對花時間。

跟webfont一樣iconfont實現(xiàn)的關(guān)鍵代碼是“@font-face”（細(xì)談CSS@font face）查看其瀏覽器兼容信息為IE8+:

低版本瀏覽器其實也有方法兼容，icoMoon是圖標(biāo)字體開發(fā)時生成字體文件及demo的網(wǎng)站，用過icoMoon的同學(xué)都知道其有一個“Support IE 7”選項， icoMoon IE7支持實現(xiàn)原理：樣式上用*zoom 觸發(fā)重繪（觸發(fā)haslayout）， 腳本上檢測 關(guān)鍵字className動態(tài)插入dom節(jié)點實現(xiàn)；考慮到IE7目前的市場份額，以及該方式帶來的性能消耗，本人不建議去兼容。

另外，圖標(biāo)只能單色調(diào)這個問題也有辦法解決，阿里巴巴iconfont+ 也是圖標(biāo)字體開發(fā)時生成字體文件及demo的網(wǎng)站；阿里巴巴iconfont+ 生成的demo可以解決圖標(biāo)單色調(diào)問題，其原理是 生成svg合集， 然后使用svg呈現(xiàn)圖標(biāo)。但該方式兼容性較差（SVG兼容小結(jié)）， 如是移動端開發(fā)不考慮低版本瀏覽器兼容問題可以嘗試該方式。

根據(jù)以上圖標(biāo)字體的優(yōu)缺點， 個人總結(jié)的使用場景如下：

1.web app(H5) 小圖標(biāo) 放大失真問題解決；

移動頁面大多數(shù)情況沒辦法用雪碧圖，用了雪碧圖表示圖片大小固定了，而移動端需要兼容不同屏幕大小的移動設(shè)備，這就需要圖片是可以根據(jù)屏幕尺寸而改變的。 如果你的圖尺寸是固定的，那就可以用雪碧圖。

2.PC端小圖標(biāo)性能更佳、小圖標(biāo)尺寸修改不用改原圖；

PC端頁面優(yōu)化，可將部分雪碧圖換成小圖標(biāo)，字體圖標(biāo)比雪碧圖的http請求少、體積?。唬虞d一個頁面時分模塊開發(fā)關(guān)系可能有多張雪碧圖，但使用字體圖標(biāo)，文件一個就夠）

PC端做換膚業(yè)務(wù)時，使用了字體圖標(biāo)實現(xiàn)起來更加的優(yōu)雅、方便。（之前做頁面換皮膚功能時發(fā)現(xiàn)換膚時小圖標(biāo)得多出一套雪碧圖略麻煩， 如果是字體圖標(biāo)直接更新顏色樣式就OK）

知乎、斗魚、Bilibili這類網(wǎng)站不少地方使用了雪碧圖，如果我們維護(hù)這類網(wǎng)站，能用圖標(biāo)字體替換么？

從兩方面考慮：

1.開發(fā)時間成本問題， 使用自定義圖標(biāo)字體替換雪碧圖需要一定時間，如果要求快速更新小圖標(biāo)建議維持用雪碧圖；

2.字體小圖標(biāo)兼容、單調(diào)色問題， 如果網(wǎng)站需要兼容低版本瀏覽器、且圖標(biāo)復(fù)雜、或者多色那還是得用雪碧圖。

所以實現(xiàn)小圖標(biāo)時雪碧圖 跟 圖標(biāo)字體會在一個網(wǎng)站共存，自定義圖標(biāo)字體 為什么比較耗時，且太復(fù)雜圖標(biāo)無法實現(xiàn)？請往下看iconfont開發(fā)流程就了解了。

接下來就是本文篇幅最大的章節(jié)， 我將從自己實現(xiàn)圖標(biāo)字體小demo上詳細(xì)的列出所有步驟。

使用免費圖標(biāo)字體：

如果網(wǎng)站使用的不是自定義的圖標(biāo)字體，而是網(wǎng)上開源的免費圖標(biāo)那實現(xiàn)上將非常的簡單；

例如， 我要使用阿里巴巴iconfont+ 上的圖標(biāo)字體， 進(jìn)入網(wǎng)站并登陸（可以用github賬號登錄），從圖標(biāo)庫選取自己喜歡的圖標(biāo)：

這里我選取了三個小圖標(biāo)，點擊右上角購物車，將選取的圖標(biāo)添加到新建項目,然后點選“下載至本地”：

下載下來的壓縮包就包括了 三小圖標(biāo)字體文件， 以及三種實現(xiàn)方式的demo；

下載圖標(biāo)字體的三種用法，打開對應(yīng)html（demo_fontclass.html、demo_symbol.html、demo_unicode.html）文件即可了解（也可直接打開我demo里的這三個文件查看用法，所以用法這里不冗述了）；有4個字體文件（EOT/SVG/TTF/WOFF）是為了兼容所有瀏覽器，因為不同瀏覽器對字體格式兼容是不一樣的：

使用自定義圖標(biāo)字體：

實際開發(fā)中基本都是使用自定義生成的圖標(biāo)字體,大致步驟如下：

1）使用PS-矩形工具 生成圖標(biāo)；

2）AI軟件打開PSD文件，F(xiàn)ile->Scripts->SaveDocsAsSVG 生成SVG文件；

3）訪問阿里巴巴iconfont+(或iconMoon)上傳SVG生成字體文件；

PS: 教程雪碧圖vs圖標(biāo)字體 中多了PS導(dǎo)出AI文件的步驟，經(jīng)實踐PS生成的AI文件打開容易顯示空白，且AI軟件可直接打開PSD文件，該步驟可省略.

其實生成自定義圖標(biāo)字體一般交給設(shè)計部同事完成（可能設(shè)計同事是用Sketch而不是PS生成小圖標(biāo)）， 因為要了解整個流程細(xì)節(jié)，所以請教了設(shè)計部同事生成自定義圖標(biāo)字體的技巧跟方法； 這里就分享下生成自定義圖標(biāo)字體的具體流程：

首先，下載生成小圖標(biāo)的軟件： PS(Photoshop)、AI(Adobe Illustrator);

PS下載地址：mac 版、windows版

AI下載地址：mac 版、windows版

1）使用PS-矩形工具 生成圖標(biāo)；

預(yù)計demo功能： 三個小圖標(biāo)：笑臉、黑臉、帽子； 默認(rèn)顯示笑臉+帽子，鼠標(biāo)hover，變成黑臉+帽子（顏色變綠）；

將要實現(xiàn)的小demo將有三個小圖標(biāo)， 接下來就使用PS生成這三個小圖標(biāo)；

無論是用Sketch還是Photoshop繪制小圖標(biāo)的思路都差不多，使用各種基本圖形相加相減得到想要的小圖標(biāo)；所以太復(fù)雜的圖形實現(xiàn)起來會耗時甚至無法實現(xiàn)。（PS矢量小圖標(biāo)制作、Sketch小圖標(biāo)制作技巧）

笑臉PSD：

使用PS新建165px 124px 圖層， 使用 “圓角矩形工具”創(chuàng)建100px100px的圓（顏色#666）：

繼續(xù)用 “圓角矩形工具”繪制小圖標(biāo)的眼睛（為了直觀可改成白色）：

ctrl+e(command+e) 合并形狀并選擇“排除重疊形狀”：

小圖標(biāo)的嘴巴有點復(fù)雜，使用鋼筆工具或使用兩個圓形相減（“排除重疊形狀” ）+矩形工具（“與形狀區(qū)域相交”）生成嘴巴:

然后 ctrl+e(command+e) 合并形狀并選擇“排除重疊形狀”生成笑臉

黑臉PSD：

與笑臉PSD一樣流程， 只把嘴巴旋轉(zhuǎn)180度就行：

帽子PSD：
使用PS新建165px 124px 圖層， 使用 “橢圓工具”創(chuàng)建150px20px的橢圓（顏色#666），然后畫一個90px*110px的橢圓：

在第二個橢圓圖層使用矩形工具（“減去頂層形狀”）刪減該橢圓內(nèi)容然后與第一個橢圓 ctrl+e(command+e) 合并形狀：

2）AI軟件打開PSD文件，F(xiàn)ile->Scripts->SaveDocsAsSVG 生成SVG文件；

生成三個小圖標(biāo)的PSD后，我們使用AI軟件打開三個文件， 然后分別處理生成SVG文件：

3）訪問阿里巴巴iconfont+(或iconMoon)上傳SVG生成字體文件；

將上述步驟生成的SVG文件在阿里巴巴iconfont+中上傳，然后這幾個小圖標(biāo)就在“我上傳的icon”中：

將圖標(biāo)添加入庫， 然后添加到項目， 最后就能下載字體及demo到本地了：

字體文件下載好后， 就能輕松實現(xiàn)我的小demo:

小demo演示地址；

1.生成圖標(biāo)字體注意事項；

截圖來自阿里巴巴iconfont+；

更多生成圖標(biāo)字體注意點，請閱讀參考資料中《雪碧圖vs圖標(biāo)字體》->如何制作圖標(biāo)字體；

2.使用圖標(biāo)字體注意事項;

跨域問題

1）配置自己的服務(wù)器；

# For Apache

Header set Access-Control-Allow-Origin "*"

# For nginx
location ~* .(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

2）放在同一個域；

3）使用base64置入CSS中(Icomoon在導(dǎo)出圖標(biāo)時，設(shè)置里勾選Encode & Embed Font in CSS選項，IE8+支持base64)。

字體圖標(biāo)出現(xiàn)鋸齒的問題

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

@font-face與性能問題

1）只在你確定你非常需要 @font-face的時候才使用它;

2）將你的@font-face定義在所有的script標(biāo)簽前;

3）如果你有許多字體文件，考慮將它們分散到幾個域名下;

4）不要包含沒有使用的 @font-face聲明——IE將不分它使用與否，通通加載;

5）Gzip字體文件，同時給它們一個未來的過期頭部聲明;

6）考慮字體文件的后加載，起碼對于IE。

--以上使用圖標(biāo)字體注意事項來源《淺談圖標(biāo)字體》；

關(guān)于字體文件跨域可能是大家最關(guān)心的問題， 三種解決跨域的方式中base64至入CSS是比較主流的做法，例如?小米官網(wǎng)?的小圖標(biāo)就是用base64至入CSS中實現(xiàn)。

Icomoon在導(dǎo)出圖標(biāo)時，設(shè)置里勾選Encode & Embed Font in CSS選項

目前 Icomoon 勾選生成base64樣式會出現(xiàn)收費的問題，那目前實現(xiàn)base64至入CSS有哪些方式呢？
1.使用在線 網(wǎng)站將字體文件 生成base64樣式；
百度關(guān)鍵字“圖標(biāo)字體轉(zhuǎn)base64”能找到不少， 這里推薦?轉(zhuǎn)base64在線工具?；

在線工具要求源文件不能大于100K，如果文件過大可以考慮本地構(gòu)件工具；

2.使用webpack、gulp等構(gòu)件工具在本地將字體文件轉(zhuǎn)成base64樣式；
本demo使用?gulp base64?實現(xiàn)轉(zhuǎn)換：

PS： 本demo的“base64”指令 配置的有點粗糙， 如果在生產(chǎn)中會考慮 接受參數(shù) 以及 自動將生成的樣式合并到 指定樣式文件等，大家可以查看?gulp base64?官網(wǎng)了解更詳細(xì)的使用方法。

參考資料：

細(xì)談CSS@font face；

淺談圖標(biāo)字體；

SVG向下兼容優(yōu)雅降級技術(shù)；

Sketch 繪制小圖標(biāo)技巧；

雪碧圖vs圖標(biāo)字體；

PS矢量小圖標(biāo)設(shè)計；

本文對應(yīng)源碼：

github源碼地址；

demo演示地址；