大家都知道现在各个浏览器都支持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>