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

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

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

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

1.優(yōu)點(diǎn)；

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

2.缺點(diǎn)；

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

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

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

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

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

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

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

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

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

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

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

從兩方面考慮：

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

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

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

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

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

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

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

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

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

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

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

實(shí)際開發(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)實(shí)踐PS生成的AI文件打開容易顯示空白，且AI軟件可直接打開PSD文件，該步驟可省略.

其實(shí)生成自定義圖標(biāo)字體一般交給設(shè)計(jì)部同事完成（可能設(shè)計(jì)同事是用Sketch而不是PS生成小圖標(biāo)）， 因?yàn)橐私庹麄€(gè)流程細(xì)節(jié)，所以請(qǐng)教了設(shè)計(jì)部同事生成自定義圖標(biāo)字體的技巧跟方法； 這里就分享下生成自定義圖標(biāo)字體的具體流程：

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

PS下載地址：mac 版、windows版

AI下載地址：mac 版、windows版

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

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

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

無論是用Sketch還是Photoshop繪制小圖標(biāo)的思路都差不多，使用各種基本圖形相加相減得到想要的小圖標(biāo)；所以太復(fù)雜的圖形實(shí)現(xiàn)起來會(huì)耗時(shí)甚至無法實(shí)現(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)的嘴巴有點(diǎn)復(fù)雜，使用鋼筆工具或使用兩個(gè)圓形相減（“排除重疊形狀” ）+矩形工具（“與形狀區(qū)域相交”）生成嘴巴:

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

黑臉PSD：

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

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

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

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

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

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

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

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

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

小demo演示地址；

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

截圖來自阿里巴巴iconfont+；

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

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

跨域問題

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

# For Apache

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

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

2）放在同一個(gè)域；

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

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

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

@font-face與性能問題

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

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

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

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

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

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

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

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

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

目前 Icomoon 勾選生成base64樣式會(huì)出現(xiàn)收費(fèi)的問題，那目前實(shí)現(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?實(shí)現(xiàn)轉(zhuǎn)換：

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

參考資料：

細(xì)談CSS@font face；

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

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

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

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

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

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

github源碼地址；

demo演示地址；