在這篇教程中,我們將看看如何使用一個(gè)免費(fèi)的Web應(yīng)用程序IcoMoon將矢量圖轉(zhuǎn)換成Web字體。然后在看看如何使用生成的字體通過css應(yīng)用到Web頁面中。
使用字體圖標(biāo)的優(yōu)勢
字體圖標(biāo)除了圖像清晰度之外,比位圖還有哪些優(yōu)勢呢。
適用性:一個(gè)圖標(biāo)字體比一系列的圖像(特別是在Retina屏中使用雙倍大小的圖像)要小。一旦圖標(biāo)字體加載了,你的圖標(biāo)就會(huì)馬上渲染出來,不需要下載一個(gè)圖像。
可擴(kuò)展性:圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小。這使您能夠隨時(shí)輸出不同大小的圖標(biāo),然而,使用位圖,你必須得為每個(gè)不同大小的圖像輸出一個(gè)不同文件。