CSS3 icon font

你們都知道如今各個瀏覽器都支持CSS3的自定義字體(@font-face)，包括IE6都支持，只是各自對字體文件格式的支持不太同樣。那麼對於網站中用到的各類icon，咱們就能夠嘗試使用font來實現，

爲何要將icon作成字體？

在不少網站項目中，咱們經常會用到各類透明小圖標，而後網站要兼容各個瀏覽器，也可能會有多個尺寸，甚至還要考慮換膚等需求。那麼咱們就要將這些小圖標輸出爲多種尺寸、顏色和文件格式，好比png8 alpha透明或者png8 index透明等。

使用字體來實現圖標優點：

   字體文件小，通常20-50kb； 容易編輯和維護，尺寸和顏色能夠用css來控制； 透明徹底兼容IE6； 如何將icon變成字體。

   最關鍵的是要將設計稿中的icon(要有矢量路徑，位圖無法轉化)完美還原成字體，這並非很麻煩。

字體格式的瀏覽器支持：

目前，各個瀏覽器對字體格式的支持是最大的區別：

webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2如下只支持SVG字體；

Chrome：除webkit支持的之外，從Chrome 6開始，開始支持woff格式；

Firefox：支持.ttf和.otf，從Firefox 3.6開始支持woff格式；

Opera：支持.ttf、.otf、.svg。尚不支持woff Opera 11開始支持WOFF(多謝Apostle提醒~~)；

IE：只支持eot格式，IE9開始支持woff。

注：woff是最新的web開放字體格式(web open font format)，w3c推薦，主要優點是針對瀏覽器進行優化，字體文件小。

在CSS中使用icon字體：

先使用font-face聲明字體：

@font-face {
font-family: 'emotion';
src: url('emotion.eot'); /* IE9*/
src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('emotion.woff') format('woff'), /* chrome、firefox */
url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */
}

而後，在icon元素上使用該字體就行了：

.icon{font-family:"emotion" Tahoma;
...
}

<span class="icon">i</span>