原文來(lái)自：http://www.reibang.com/p/0fc36e7f7d2e
在看別人 github 項(xiàng)目的時(shí)候渊季，看到了 iconfont，百度了一下是阿里的圖標(biāo)庫(kù)罚渐，這個(gè)很容易理解却汉，但是自己操作一遍之后發(fā)現(xiàn)下載下來(lái)的目錄還包含了 .eot、.woff 等文件荷并，對(duì)于這些新東西感到有些陌生合砂，在經(jīng)過(guò)一番查找之后有所得，整理思路源织，記錄于此翩伪。
一、Iconfont
1. 概述
在前端作業(yè)中谈息，二十年前只有頁(yè)面中鋪滿文字就算上線產(chǎn)品缘屹，現(xiàn)如今，不加點(diǎn)俏皮的“圖標(biāo)”會(huì)讓頁(yè)面顯得很 Low 很 Low侠仇。
[圖片上傳失敗...(image-dc9e74-1512828223428)]
在寫(xiě)這篇文章之前轻姿，我一直以為上圖中的“圖標(biāo)”是一個(gè)個(gè)的圖片組成，但學(xué)習(xí)總是給人新知逻炊，現(xiàn)在我知道了它們只是一種字體互亮，類(lèi)似于“宋體”、“楷體”這種余素。如果我們要使用它們豹休，也只需要在 css 文件中使用 @font-face 引入這種字體即可。@font-face 是 css3 的一個(gè)語(yǔ)法溺森，剛興趣的可以自行閱讀 @font-face 用法 慕爬。
2. Iconfont 介紹
Iconfont 是阿里提供了一個(gè)圖標(biāo)庫(kù)，你可以想象成是一個(gè)售賣(mài)圖標(biāo)的超市屏积，挑選你需要的圖標(biāo)放入購(gòu)物車(chē)医窿，然后 Iconfont 會(huì)為你打包你購(gòu)物車(chē)?yán)锏膱D標(biāo)，自動(dòng)生成一種新的字體炊林，你可以選擇下載到本地姥卢，在你的項(xiàng)目中引入這種字體，這樣即便沒(méi)有網(wǎng)絡(luò)的情況也可以使用圖標(biāo)。
這種模式的一大優(yōu)點(diǎn)就是只挑選出需要的圖標(biāo)独榴，不會(huì)像其他圖標(biāo)庫(kù)那樣直接下載一整個(gè)圖標(biāo)庫(kù)的內(nèi)容僧叉，盡管你可能只會(huì)使用到其中一到兩個(gè)圖標(biāo)。要知道棺榔，有的項(xiàng)目打包上線對(duì)大小是有嚴(yán)格要求的瓶堕，比如微信小程序打包之后的代碼大小就要控制在 1 M以下。
關(guān)于如何使用 Iconfont症歇，網(wǎng)絡(luò)已經(jīng)有人贅述的很詳細(xì)了郎笆，這里就不再重復(fù)。具體步驟參閱： iconfont字體圖標(biāo)的使用方法忘晤。
注：除了阿里的 Iconfont宛蚓，Bootstrap 的圖標(biāo)是 Font-Awsome。
二设塔、字體格式 —— .eot凄吏、.woff、.ttf闰蛔、.svg
1. 概述
在阿里圖標(biāo)庫(kù)中下載圖標(biāo)到本地后痕钢，目錄結(jié)構(gòu)如下：
[圖片上傳失敗...(image-6d5387-1512828223428)]
第一次看到這幾個(gè)文件時(shí)，不知道有什么用钞护，可能會(huì)直接刪除盖喷，但萬(wàn)萬(wàn)不可，打開(kāi) iconfont.css 文件可以在 @font-face 中都有引用這幾個(gè)文件难咕。查詢資料后得知：雖然現(xiàn)代瀏覽器支持自定義字體樣式，并且可以通過(guò) @font-face 引入自定義的字體距辆，但是各個(gè)瀏覽器對(duì)于字體樣式是存在兼容性問(wèn)題的余佃，而這幾個(gè)文件就是分別處理對(duì)應(yīng)瀏覽兼容性問(wèn)題的。
2. 字體格式介紹
目前最主要的幾種網(wǎng)絡(luò)字體(web font)格式包括WOFF跨算，SVG爆土，EOT，OTF/TTF诸蚕。
WOFF
WOFF是Web Open Font Format幾個(gè)詞的首字母簡(jiǎn)寫(xiě)步势。這種字體格式專(zhuān)門(mén)用于網(wǎng)上，由Mozilla聯(lián)合其它幾大組織共同開(kāi)發(fā)背犯。WOFF字體通常比其它字體加載的要快些坏瘩，因?yàn)槭褂昧薕penType (OTF)和TrueType (TTF)字體里的存儲(chǔ)結(jié)構(gòu)和壓縮算法。這種字體格式還可以加入元信息和授權(quán)信息漠魏。這種字體格式有君臨天下的趨勢(shì)倔矾，因?yàn)樗械默F(xiàn)代瀏覽器都開(kāi)始支持這種字體格式。【支持的瀏覽器：IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】
SVG / SVGZ
Scalable Vector Graphics (Font). SVG是一種用矢量圖格式改進(jìn)的字體格式哪自，體積上比矢量圖更小丰包，適合在手機(jī)設(shè)備上使用∪老铮【支持的瀏覽器：Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
EOT
Embedded Open Type邑彪。這是微軟創(chuàng)造的字體格式。這種格式只在IE6-IE8里使用胧华〖闹ⅲ【支持的瀏覽器：IE4+】
OTF / TTF
OpenType Font 和 TrueType Font。部分的因?yàn)檫@種格式容易被復(fù)制(非法的)撑柔，這才催生了WOFF字體格式瘸爽。然而，OpenType有很多獨(dú)特的地方铅忿，受到很多設(shè)計(jì)者的喜愛(ài)剪决。【支持的瀏覽器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
3. 使用 @font-face 引入字體格式
因?yàn)楦鱾€(gè)瀏覽器對(duì)字體格式的不兼容檀训，作為前端開(kāi)發(fā)人員柑潦，我們需要考慮的全面性，將各個(gè)格式的字體都引入進(jìn)來(lái)峻凫，這樣就不怕刁鉆的用戶使用哪種瀏覽器了渗鬼。
常見(jiàn)兼容性寫(xiě)法：
@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 下載字體到本地，那么恭喜你荧琼，打開(kāi) iconfont.css 文件譬胎，可以看到 Iconfont 已經(jīng)幫助你配好了這些內(nèi)容，你只需要在頁(yè)面中引入 iconfont.css 即可直接使用命锄。
