iconfont 圖標字體

no_mkd

一.iconfont 的優缺點

優點

1. 矢量性

   螢幕適配（縮放）

2. 字體性

   樣式控制（顏色，陰影，甚至浮雕）

3. 檔案小

   一般 20-50KB，比圖片小很多，例如 typicons 庫有 308 個 icon，字體檔案大小為 59KB（woff） ~ 147KB（svg）

   圖標檔案一般 1.5KB/個（Sprite 只會讓總大小更大）

4. 不需要 Sprite，易於修改

   省去了使用 Sprite 的麻煩，很容易修改更換

缺點

1. 顏色限制

   iconfont 只能是純色或者漸變色，複雜圖標無法使用該技術（雖然也有方法可以實現多色 iconfont，但相容性，成本都無法接受）

2. FOUT（Flash of Unstyled Text）問題

   瀏覽器先用預設字體渲染，待字體檔案下載完畢後再對文字內容進行部分渲染，文字就會出現不可避免的閃爍

3. IE 會阻塞頁面渲染

   如果在 @font-face 宣告之前有 script 標籤的話，IE 將不會渲染任何東西，直到字體檔案完成下載

4. 性能

   IE 問題比較多，IE 和 FF 下 @fontface 會阻塞 window.onload，IE 下用不用都會載入，字體載入出錯（長時間未返回結果）時，IE 會等待 10 分鐘（期間白屏），其它瀏覽器會用預設字體渲染或者暫時不顯示內容，在等待下載期間忙指示器會一直被觸發（狀態欄、進度條、圖標、滑鼠指標）

二。製作生成

1. [步驟可選]PS, 從 png 導出路徑

2. AI，填色，閉合路徑，存為 svg

3. 在線字體生成器

   • http://www.iconfont.cn/icons/uploadShow

   • http://fontello.com/

三。管理維護

上傳至在線平台，自動生成列表視圖，方便管理，例如http://www.iconfont.cn/showProject?pid=26177

四。字體格式與相容性

字體格式

• woff：W3C 推薦格式，體積最小，相容性差

  Android 4.4+，IE9+

• ttf：Win 和 Mac 預設字體格式

  Android 4.1+，IE9+ 部分支援

• eot：微軟提出的，允許 @fontface 嵌入 OpenType 字體

  Android 不支援，IOS 不支援，IE 不支援

• svg：相容性好，體積大

  Android 4.1+ 部分支援，IE9+

字體檔案大小

20 個 icon，字體檔案大小分別為：

• woff：7K

• ttf：11K

• eot：11K

• svg：14K

相容性

• IE：從 IE4 開始支援 eot 格式，IE9 開始支援 woff

• webkit/safari：支援 TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS 4.2+ 支援.ttf，iOS 4.2 以下只支援 SVG 字體，Safari 5.1+ 開始支援 woff 格式

• Chrome：除 webkit 支援的以外，從 Chrome 6 開始，開始支援 woff 格式

• Firefox：支援.ttf 和.otf，從 Firefox 3.6 開始支援 woff 格式

• Opera：支援.ttf、.otf、.svg。Opera 11 開始支援 woff

• iPad, iPhone and Android 3.0+ 支援 SVG fonts

  此處與 caniuse 結論有差異

五。性能優化原則

• 將你的 @font-face 定義在所有的 script 標籤前

• 如果你有許多字體檔案，考慮將它們分散到幾個網域下

• 不要包含沒有使用的 @font-face 宣告——IE 將不分它使用與否，通通載入

• Gzip 字體檔案，同時給它們一個未來的過期頭部宣告

• 考慮字體檔案的後載入（放在 body 結束標籤前），起碼對於 IE（IE 留 10 分鐘下載字體，在此期間，頁面阻塞）

關於@fontface 性能問題的詳細資訊請查看【翻譯】 @font-face 與性能

六。注意事項

1.FF 不載入異域字體

放到同域或設置伺服器頭

2.safair 和 chrome 下字體被加粗

把半畫素鋸齒渲染成了 1px，設置 css 規則：-webkit-font-smoothing: antialiased;

3.PC 的 Chrome 下嚴重鋸齒

對邊緣模糊處理即可，設置 css 規則：-webkit-text-stroke-width: 0.2px;

七。結論

1. iconfont 優點 > 缺點，複用性與維護性上的便利很誘人

2. 生成字體庫的主要工作量在於 png 轉 svg

   如果 UI 肯配合就很容易了，而且字體庫建好後對 UI 也有好處，做設計稿更方面，有PS 插件可以直接使用 iconfont，不用切出 icon

   （親測不支援 cc，cs6，對插件質量保持懷疑，如果插件不可用，UI 設計稿圖標與 iconfont 的對應是個小麻煩）

3. 字體庫管理不是問題

   http://www.iconfont.cn/users/project非常方便

4. 相容性不是問題

   4 種格式都放上，相容性足夠了

5. 性能不是很好

   但和圖片 Sprite 相比足夠好了