認識 Iconfont 以及什麼是 .eot、.woff、.ttf、.svg
一、Iconfont
1. 概述
在前端作業中，二十年前只有頁面中鋪滿文字就算上線產品，現如今，不加點俏皮的“圖示”會讓頁面顯得很 Low 很 Low。
圖示
在寫這篇文章之前，我一直以為上圖中的“圖示”是一個個的圖片組成，但學習總是給人新知，現在我知道了它們只是一種字型，類似於“宋體”、“楷體”這種。如果我們要使用它們，也只需要在 css 檔案中使用 @font-face 引入這種字型即可。@font-face 是 css3 的一個語法，剛興趣的可以自行閱讀 @font-face 用法
2. Iconfont 介紹
Iconfont 是阿里提供了一個圖示庫，你可以想象成是一個售賣圖示的超市，挑選你需要的圖示放入購物車，然後 Iconfont 會為你打包你購物車裡的圖示，自動生成一種新的字型，你可以選擇下載到本地，在你的專案中引入這種字型，這樣即便沒有網路的情況也可以使用圖示。
這種模式的一大優點就是隻挑選出需要的圖示，不會像其他圖示庫那樣直接下載一整個圖示庫的內容，儘管你可能只會使用到其中一到兩個圖示。要知道，有的專案打包上線對大小是有嚴格要求的，比如微信小程式打包之後的程式碼大小就要控制在 1 M以下。
關於如何使用 Iconfont，網路已經有人贅述的很詳細了，這裡就不再重複。具體步驟參閱：
注：除了阿里的 Iconfont，Bootstrap 的圖示是 Font-Awsome。
二、字型格式 —— .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 即可直接使用。
三、參考文章