原文連接配接
大家都知道現在各個浏覽器都支援CSS3的自定義字型(@font-face)，包括IE6都支援，隻是各自對字型檔案格式的支援不太一樣。那麼對于網站中用到的各種icon，我們就可以嘗試使用font來實作，本文将詳細講解這種用法。
為什麼要将icon做成字型？
在很多網站項目中，我們常常會用到各種透明小圖示，然後網站要相容各個浏覽器，也可能會有多個尺寸，甚至還要考慮換膚等需求。那麼我們就要将這些小圖示輸出為多種尺寸、顔色和檔案格式，比如png8 alpha透明或者png8 index透明等。
比如，twitter用到的各種小icon：
這種情況下，使用字型來實作圖示就有很多優勢：
字型檔案小，一般20-50kb；
容易編輯和維護，尺寸和顔色可以用css來控制；
透明完全相容IE6；
如何将icon變成字型？
最關鍵的是要将設計稿中的icon(要有矢量路徑，位圖沒法轉化)完美還原成字型，這并不是很麻煩。
我們要用到一些字型編輯軟體，比如FontCreator、FontLab等，這裡我們用FontLab來示範。
還原步驟很簡單：
PSD–>eps–>FontLab，即将PSD轉換為illustrator的eps格式，然後将某個字元複制到FontLab中即可。
具體步驟：
打開設計稿psd，将其儲存為Photoshop eps格式，我們這裡以Qzone中說說發表框的表情icon為例：
在illustrator中打開儲存的eps檔案：
取消分組，然後點選某個icon，複制。
打開FontLab，随便打開一款字型檔案，比如tahoma.ttf：
然後輕按兩下某個字元，将原有圖形删除，粘貼剛才複制的icon對象：
調整圖形大小，一個icon就完成還原了。
就是這麼簡單。所有icon還原完之後，生成字型檔案就可以了。
檢視字型對應字元，可以在字型清單中，在某個字型上右鍵檢視屬性(快捷鍵Alt+Enter)，檢視該字型對應的字元：
可以看到字型對應的字元是i，unicode編碼是0069。
字型格式的浏覽器支援：
目前，各個浏覽器對字型格式的支援是最大的差別：
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。
注：以上資料來自于：webfonts.info
注：woff是最新的web開放字型格式(web open font format)，w3c推薦，主要優勢是針對浏覽器進行優化，字型檔案小。詳情可檢視wiki：
在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; ... }
最後，在頁面中使用這個字型：
支援CSS3的浏覽器可以更上流一點兒，我們每次修改html可能沒那麼友善，如果要改變某個icon，則可能需要修改相關字元，比如将i修改為e等。如果使用css3的僞元素，可以友善很多：
.icon{
display:inline-block;
width:px;
height:px;
/*占個位**/ ...
}
.icon:after,.icon::after{
font-family:"emotion" Tahoma;
display:inline-block;
content:"i";/*在這裡調用字元*/
width:px;
height:px;
margin-left:-px;/*position:absolute什麼的也可以，看具體情況*/
}
嗯，就是用實際元素占位，用僞元素+content屬性顯示icon，然後覆寫到實際元素上面，之後我們修改某個icon隻需要更改css樣式就可以了。
IE依然棘手：
因為IE9以前隻支援eot格式，是以需要将ttf轉換為eot先，這裡可以使用微軟官方的WEFT軟體，也可以使用一些線上工具：
http://www.kirsle.net/wizards/ttf2eot.cgi 線上轉ttf為eot格式；
http://www.fontsquirrel.com/fontface/generator強大的線上轉ttf為eot、woff等字型格式
另外，eot檔案必須添加域名白名單才可以使用，這裡推薦使用CreateMyEOT：
總結：
其實，這種方法有一個不足，就是隻支援純色icon，最多能高端浏覽器上實作漸變色或圖形蒙闆。
當然，我們有很多場景是用純色icon，特别是在Windows 8這種Metro UI開始越來越多的時候。
另外，這種方法可以有效減少頁面的請求，但是對于習慣使用CSSGaGa的auto sprite功能的同學來說，這種方法對頁面性能的提升不大。
但是對于移動終端，特别是webapp中，這種方法還是有很大的用武之地的，可以很友善的相容多分辨率，配合離線存儲效果更佳。
如果你有這方面更好的建議和意見，歡迎提出。