如何把你的圖標轉換成WEB字體發(fā)布者：本站     時(shí)間：2020-05-17 13:05:49

我已經(jīng)制為網(wǎng)站制作了一些優(yōu)雅的圖標，并且在新的網(wǎng)站和老的iPad上進(jìn)行了測試。正常尺寸下，布局看看上去一切OK，但的將頁(yè)面進(jìn)行放大顯示，我卻發(fā)現我的icon變得模糊不清，但是基于文本的標題依然清晰可見(jiàn)。在具有Retina顯屏的iPad上，這些圖標看上去都不清晰，即使在沒(méi)有進(jìn)行任何放大的情況之下。
我第一想法就是創(chuàng )建雙倍大小的Sprite圖，然后通過(guò)css樣式，設置他們只顯示二分之一尺寸。雖然這樣的方法讓他們在Retina屏上顯示的大小是正常的，一旦你開(kāi)始放大屏幕，圖標又變得模糊不清。但文本還是一樣的清晰。

答案很明顯，我需要把我的圖標變成一個(gè)字體。

如何把你的圖標轉換成WEB字體 三聯(lián)
在這篇教程中，我們將看看如何使用一個(gè)免費的Web應用程序IcoMoon將矢量圖轉換成Web字體。然后在看看如何使用生成的字體通過(guò)css應用到Web頁(yè)面中。

使用字體圖標的優(yōu)勢

字體圖標除了圖像清晰度之外，比位圖還有哪些優(yōu)勢呢。

適用性：一個(gè)圖標字體比一系列的圖像(特別是在Retina屏中使用雙倍大小的圖像)要小。一旦圖標字體加載了，你的圖標就會(huì )馬上渲染出來(lái)，不需要下載一個(gè)圖像。

可擴展性：圖標字體可以用過(guò)font-size屬性設置其任何大小。這使您能夠隨時(shí)輸出不同大小的圖標，然而，使用位圖，你必須得為每個(gè)不同大小的圖像輸出一個(gè)不同文件。

靈活性：文字效果可以很容易地應用到你的圖標上，包括顏色，陰影和翻轉等效果。他們還可以在任何背景下顯示。

兼容性：網(wǎng)頁(yè)字體支持所有現代瀏覽器，包括IE低版本。詳細兼容性可以點(diǎn)擊這里。

我們開(kāi)始吧!

創(chuàng )建一個(gè)圖標字體

Symbol字體可以使用一個(gè)專(zhuān)用的字體創(chuàng )建應用程序，比如說(shuō)Glyphs，但是一個(gè)專(zhuān)業(yè)的排版工具之外的需求或要求構建一個(gè)簡(jiǎn)單的圖標字體，比如說(shuō)間距和粗細這樣的物理關(guān)系并不是非常重要。

目前為止，最簡(jiǎn)單的方法是使用Keyamoon制作的一個(gè)Web應用程序IcoMoon，可以解決字符轉換成Web字體的所有麻煩。

這個(gè)Html5應用程序解決了創(chuàng )建字體文件和如何使用創(chuàng )建的圖標字體的一切麻煩。IcoMoon附帶了大量的圖標，你也可以通過(guò)圖標庫添加更多的圖標，其中大部分都可以免費使用(使用時(shí)請先查看他們的許可證)。如果你正在尋找如“文件下載”和“購物車(chē)”一樣的圖標，那么你會(huì )發(fā)現，使用標準的圖標比你自己創(chuàng )建的要方便得多。