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