你們都知道如今各個瀏覽器都支持CSS3的自定義字體(@font-face),包括IE6都支持,只是各自對字體文件格式的支持不太同樣。那麼對於網站中用到的各類icon,咱們就能夠嘗試使用font來實現,css
爲何要將icon作成字體?web
在不少網站項目中,咱們經常會用到各類透明小圖標,而後網站要兼容各個瀏覽器,也可能會有多個尺寸,甚至還要考慮換膚等需求。那麼咱們就要將這些小圖標輸出爲多種尺寸、顏色和文件格式,好比png8 alpha透明或者png8 index透明等。chrome
使用字體來實現圖標優點:瀏覽器
字體文件小,通常20-50kb; 容易編輯和維護,尺寸和顏色能夠用css來控制; 透明徹底兼容IE6; 如何將icon變成字體。svg
最關鍵的是要將設計稿中的icon(要有矢量路徑,位圖無法轉化)完美還原成字體,這並非很麻煩。post
字體格式的瀏覽器支持:字體
目前,各個瀏覽器對字體格式的支持是最大的區別:優化
webkit/safari:支持TrueType/OpenType(.ttf),OpenType PS(.otf),iOS4.2+支持.ttf,iOS 4.2如下只支持SVG字體;網站
Chrome:除webkit支持的之外,從Chrome 6開始,開始支持woff格式;url
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>