iconfont實踐小結

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

圖示字型

的理解。

一。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開發流程

就瞭解了。

二。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 圖層， 使用 “圓角矩形工具”建立100px*100px的圓（顏色#666）：

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

ctrl+e（command+e）合併形狀並選擇“排除重疊形狀”：

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

然後ctrl+e（command+e）合併形狀並選擇“排除重疊形狀”生成笑臉：

黑臉PSD：

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

帽子PSD：

使用PS新建165px * 124px 圖層， 使用 “橢圓工具”建立150px*20px的橢圓（顏色#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演示地址；

三。iconfont實踐注意事項。

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演示地址；