在這篇教程中,我們將看看如何使用一個(gè)免費(fèi)的Web應(yīng)用程序IcoMoon將矢量圖轉(zhuǎn)換成Web字體。然后在看看如何使用生成的字體通過(guò)css應(yīng)用到Web頁(yè)面中。
使用字體圖標(biāo)的優(yōu)勢(shì)
字體圖標(biāo)除了圖像清晰度之外,比位圖還有哪些優(yōu)勢(shì)呢。
適用性:一個(gè)圖標(biāo)字體比一系列的圖像(特別是在Retina屏中使用雙倍大小的圖像)要小。一旦圖標(biāo)字體加載了,你的圖標(biāo)就會(huì)馬上渲染出來(lái),不需要下載一個(gè)圖像。
可擴(kuò)展性:圖標(biāo)字體可以用過(guò)font-size屬性設(shè)置其任何大小。這使您能夠隨時(shí)輸出不同大小的圖標(biāo),然而,使用位圖,你必須得為每個(gè)不同大小的圖像輸出一個(gè)不同文件。
靈活性:文字效果可以很容易地應(yīng)用到你的圖標(biāo)上,包括顏色,陰影和翻轉(zhuǎn)等效果。他們還可以在任何背景下顯示。
兼容性:網(wǎng)頁(yè)字體支持所有現(xiàn)代瀏覽器,包括IE低版本。詳細(xì)兼容性可以點(diǎn)擊這里。