CSS3 icon font

你們都知道如今各個瀏覽器都支持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>

相關文章
相關標籤/搜索