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

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

一般我們項目決定要使用一個技術點前，會查相關資料對其有大概的理解。例如， 這次要使用iconfont實現功能， 理解相關資料后歸納、總結出它的優、缺點以及它的使用場景。

圖標字體優、缺點：

1.優點；

輕量（文件體積小）、靈活（樣式可改變圖標）、兼容性好（IE8+）。

2.缺點；

圖標只能單色調（太復雜的多色圖標無法實現）、生成圖標字體相對花時間。

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

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

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

根據以上圖標字體的優缺點， 個人總結的使用場景如下：

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

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

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

PC端頁面優化，可將部分雪碧圖換成小圖標，字體圖標比雪碧圖的http請求少、體積小；（加載一個頁面時分模塊開發關系可能有多張雪碧圖，但使用字體圖標，文件一個就夠）

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

知乎、斗魚、Bilibili這類網站不少地方使用了雪碧圖，如果我們維護這類網站，能用圖標字體替換么？

從兩方面考慮：

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

2.字體小圖標兼容、單調色問題， 如果網站需要兼容低版本瀏覽器、且圖標復雜、或者多色那還是得用雪碧圖。

所以實現小圖標時雪碧圖 跟 圖標字體會在一個網站共存，自定義圖標字體 為什么比較耗時，且太復雜圖標無法實現？請往下看iconfont開發流程就了解了。

接下來就是本文篇幅最大的章節， 我將從自己實現圖標字體小demo上詳細的列出所有步驟。

使用免費圖標字體：

如果網站使用的不是自定義的圖標字體，而是網上開源的免費圖標那實現上將非常的簡單；

例如， 我要使用阿里巴巴iconfont+ 上的圖標字體， 進入網站并登陸（可以用github賬號登錄），從圖標庫選取自己喜歡的圖標：

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

下載下來的壓縮包就包括了 三小圖標字體文件， 以及三種實現方式的demo；

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

使用自定義圖標字體：

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

1）使用PS-矩形工具 生成圖標；

2）AI軟件打開PSD文件，File->Scripts->SaveDocsAsSVG 生成SVG文件；

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

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

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

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

PS下載地址：mac 版、windows版

AI下載地址：mac 版、windows版

1）使用PS-矩形工具 生成圖標；

預計demo功能： 三個小圖標：笑臉、黑臉、帽子； 默認顯示笑臉+帽子，鼠標hover，變成黑臉+帽子（顏色變綠）；

將要實現的小demo將有三個小圖標， 接下來就使用PS生成這三個小圖標；

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

笑臉PSD：

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

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

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

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

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

黑臉PSD：

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

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

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

2）AI軟件打開PSD文件，File->Scripts->SaveDocsAsSVG 生成SVG文件；

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

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

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

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

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

小demo演示地址；

1.生成圖標字體注意事項；

截圖來自阿里巴巴iconfont+；

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

2.使用圖標字體注意事項;

跨域問題

1）配置自己的服務器；

# 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在導出圖標時，設置里勾選Encode & Embed Font in CSS選項，IE8+支持base64)。

字體圖標出現鋸齒的問題

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

@font-face與性能問題

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

2）將你的@font-face定義在所有的script標簽前;

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

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

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

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

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

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

Icomoon在導出圖標時，設置里勾選Encode & Embed Font in CSS選項

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

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

2.使用webpack、gulp等構件工具在本地將字體文件轉成base64樣式；
本demo使用?gulp base64?實現轉換：

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

參考資料：

細談CSS@font face；

淺談圖標字體；

SVG向下兼容優雅降級技術；

Sketch 繪制小圖標技巧；

雪碧圖vs圖標字體；

PS矢量小圖標設計；

本文對應源碼：

github源碼地址；

demo演示地址；