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