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 圖層， 使用 「圓角矩形工具」建立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演示地址；

三.iconfont實踐注意事項.

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

截圖來自阿里巴巴iconfont+；

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

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

跨域問題

1）配置本身的服務器；

# For Apache
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
# 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演示地址；