認識 Iconfont 以及什麼是 .eot、.woff、.ttf、.svg

在看別人 github 項目的時候，看到了 iconfont，百度了一下是阿里的圖標庫，這個很容易理解，可是本身操做一遍以後發現下載下來的目錄還包含了 .eot、.woff 等文件，對於這些新東西感到有些陌生，在通過一番查找以後有所得，整理思路，記錄於此。

1、Iconfont

1. 概述

在前端做業中，二十年前只有頁面中鋪滿文字就算上線產品，現現在，不加點俏皮的「圖標」會讓頁面顯得很 Low 很 Low。

在寫這篇文章以前，我一直覺得上圖中的「圖標」是一個個的圖片組成，但學習老是給人新知，如今我知道了它們只是一種字體，相似於「宋體」、「楷體」這種。若是咱們要使用它們，也只須要在 css 文件中使用 @font-face 引入這種字體便可。@font-face 是 css3 的一個語法，剛興趣的能夠自行閱讀 @font-face 用法 。

2. Iconfont 介紹

Iconfont 是阿里提供了一個圖標庫，你能夠想象成是一個售賣圖標的超市，挑選你須要的圖標放入購物車，而後 Iconfont 會爲你打包你購物車裏的圖標，自動生成一種新的字體，你能夠選擇下載到本地，在你的項目中引入這種字體，這樣即使沒有網絡的狀況也可使用圖標。

這種模式的一大優勢就是隻挑選出須要的圖標，不會像其餘圖標庫那樣直接下載一整個圖標庫的內容，儘管你可能只會使用到其中一到兩個圖標。要知道，有的項目打包上線對大小是有嚴格要求的，好比微信小程序打包以後的代碼大小就要控制在 1 M如下。

關於如何使用 Iconfont，網絡已經有人贅述的很詳細了，這裏就再也不重複。具體步驟參閱： iconfont字體圖標的使用方法。

注：除了阿里的 Iconfont，Bootstrap 的圖標是 Font-Awsome。

2、字體格式 —— .eot、.woff、.ttf、.svg

1. 概述

在阿里圖標庫中下載圖標到本地後，目錄結構以下：

第一次看到這幾個文件時，不知道有什麼用，可能會直接刪除，但萬萬不可，打開 iconfont.css 文件能夠在 @font-face 中都有引用這幾個文件。查詢資料後得知：雖然現代瀏覽器支持自定義字體樣式，而且能夠經過 @font-face 引入自定義的字體，可是各個瀏覽器對於字體樣式是存在兼容性問題的，而這幾個文件就是分別處理對應瀏覽兼容性問題的。

2. 字體格式介紹

目前最主要的幾種網絡字體(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format幾個詞的首字母簡寫。這種字體格式專門用於網上，由Mozilla聯合其它幾大組織共同開發。WOFF字體一般比其它字體加載的要快些，由於使用了OpenType (OTF)和TrueType (TTF)字體裏的存儲結構和壓縮算法。這種字體格式還能夠加入元信息和受權信息。這種字體格式有君臨天下的趨勢，由於全部的現代瀏覽器都開始支持這種字體格式。【支持的瀏覽器：IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一種用矢量圖格式改進的字體格式，體積上比矢量圖更小，適合在手機設備上使用。【支持的瀏覽器：Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

EOT

Embedded Open Type。這是微軟創造的字體格式。這種格式只在IE6-IE8裏使用。【支持的瀏覽器：IE4+】

OTF / TTF

OpenType Font 和 TrueType Font。部分的由於這種格式容易被複制(非法的)，這才催生了WOFF字體格式。然而，OpenType有不少獨特的地方，受到不少設計者的喜好。【支持的瀏覽器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

3. 使用 @font-face 引入字體格式

由於各個瀏覽器對字體格式的不兼容，做爲前端開發人員，咱們須要考慮的全面性，將各個格式的字體都引入進來，這樣就不怕刁鑽的用戶使用哪一種瀏覽器了。

常見兼容性寫法：

@font-face {
  font-family: 'yourfontname';
  src: url('../fonts/singlemalta-webfont.eot');
  src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/singlemalta-webfont.woff') format('woff'),
       url('../fonts/singlemalta-webfont.ttf') format('truetype'),
       url('../fonts/singlemalta-webfont.svg#defineName') format('svg');
  font-weight: normal;
  font-style: normal;
}

若是你是使用 Iconfont 下載字體到本地，那麼恭喜你，打開 iconfont.css 文件，能夠看到 Iconfont 已經幫助你配好了這些內容，你只須要在頁面中引入 iconfont.css 便可直接使用。

3、參考文章

1. 博客園 - iconfont字體圖標的使用方法--超簡單!
2. Airen的博客 - CSS3 @font-face
3. 簡書 - CSS3 @font-face屬性