如何把你的圖標轉換成WEB字體

 　　我已經制為網站制作了一些優雅的圖標，並且在新的網站和老的iPad上進行了測試。正常尺寸下，布局看看上去一切OK，但的將頁面進行放大顯示，我卻發現我的icon變得模糊不清，但是基於文本的標題依然清晰可見。在具有Retina顯屏的iPad上，這些圖標看上去都不清晰，即使在沒有進行任何放大的情況之下。

　　我第一想法就是創建雙倍大小的Sprite圖，然後通過css樣式，設置他們只顯示二分之一尺寸。雖然這樣的方法讓他們在Retina屏上顯示的大小是正常的，一旦你開始放大屏幕，圖標又變得模糊不清。但文本還是一樣的清晰。

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

　　在這篇教程中，我們將看看如何使用一個免費的Web應用程序IcoMoon將矢量圖轉換成Web字體。然後在看看如何使用生成的字體通過css應用到Web頁面中。

　　使用字體圖標的優勢

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

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

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

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

　　兼容性：網頁字體支持所有現代浏覽器，包括IE低版本。詳細兼容性可以點擊這裡。

　　我們開始吧!

　　創建一個圖標字體

　　Symbol字體可以使用一個專用的字體創建應用程序，比如說Glyphs，但是一個專業的排版工具之外的需求或要求構建一個簡單的圖標字體，比如說間距和粗細這樣的物理關系並不是非常重要。

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

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

　　一步一步

　　1、准備你的插圖

　　首先，你需要能創建矢量圖標的程序，並且能夠找到輸出SVG格式，比如“Illustrator”或者“iNkscape”。

　　當你設計的時候，你可以使用任何你喜歡的顏色，但是圖標必須是一個純色。確保每個圖標的尺寸大小是相同的。有一個圖標更高或者更寬，會很難創建一個一致的字體。在這裡，我們不得不減少飛艇圖標的寬度，以便它匹配其他圖標。

　　2、清理

　　仔細檢查每一個圖標，以確保它沒有缺陷——細節在小尺寸上是完全的，當你放大的時候小的缺陷就能被發現。在所示圖標，我需要刪除參差不齊的路徑。

　　在Illustrator中，使用Pathfinder工具統一層疊元素，減去前面元素，比如這些圖標中的星星圖標。

　　關鍵的原則是確保你的圖標是可讀的小尺寸。心可能的簡化。

　　3、導成svg

　　現在，選擇一個圖標，並將它復制粘貼到一個新的文檔場景中(例如200px X 200px)。縮放也是符合。你可能會發現它有一個基線尺寸的設置。使用彩色的圖標，比如說在白色的背景中使用黑色的圖標。

　　現在，選擇菜單“文件”中“保存”，並選擇將文件保存成“SVG”格式。使用默認的SVG設置。一旦你這樣做，所有的圖標，你可以創建一個Web字體。

　　4、導入到IcoMoon

　　打開IcoMoon Web app。導入一個圖標，點擊“Imort icons”按鈕，然後選擇您想要添加的SVG文件——您也可以一次添加多個文件。這些圖標將會出現在“Your Custom Icons”區域中。如果他們是高亮的黃色顯示，表示這些圖標是你將要創建的圖標字體。在這個例子中，你可以看到，我不僅導出我自己創建的圖標，我還在“Mini-icons”中添加了別的圖標。

　　5、從IcoMoon中導出字體

　　如果你想調整圖標的位置、大小或旋轉，你可以點擊“Edit”按鈕。可以使用“Save Copy”按鈕來創建圖片的變化(例如，一個鏡像的釁標)。添加一個有意義的圖標標記，因為這將被用來生成類名。

　　當你都准備好了，點擊屏幕底部的“Font”按鈕開始生成字體。這樣你就可以指定哪個圖標映射到哪個字符上，例如，如果你要設置一套六個旋轉的球，你可以每這六個球分別指定字符：q、w、e、r、t和y。你也可以根據你自己的愛好選擇一個字體的名字。你也可以調整字體的指標，除非你要設置你息定的字體和標准文本，不然你真的不需要擔心這個。

　　6、下載字體文件

　　單擊“Download”下載字體包到你的電腦上。他有一個字文件夾包含了字體本身(woff,eot,ttf格式)，以及一個HTML示例頁面和相應的CSS。甚至還有一個javascript文件和一個解決方法，如果你需要支持IE或IE7。

　　將font文件夾復制到你的網站，為你的項目添加字體。你需要從style.css文件中復制CSS樣式，並粘貼到你網站的CSS文件中，但是我的方法是將它重命名為font.css，並保持他作為一個單獨的CSS文件。你需要的時候在把這個CSS文件引入到你的HTML中。

　　在CSS文件中你可以找到@font-face，你需要將URL路徑修改成你本地的相對路徑，或者你可以簡單地把字體文件和你的樣式放在同一個文件夾。

　　7、調用字體

　　正如你看到的樣本文件index.html，有兩種方法可以調用，一種是通字符(unicod或名稱)，另一種是通過類名。第一個例子使用了HTML5的data-icon自定義屬性。

<div aria-hidden="true" data-icon="g"></div>

　　在這裡，fs1類名用於設置字體的大小。這個“aria-hidden”屬性有助於確保字符能屏幕閱讀器讀到。

　　第二種方法使用一個span元素：

<span aria-hidden="true"></span>

　　這個方法是非常有用的，你的字符可以與文本在內聯中一起顯示。

　　如果你想讓圖標具有鏈接功能，你可以將放在一個鏈接中：

<a href="

http://www.yoursite.com

"  data-icon="s"></a>

　　在這裡，我添加了一個iconlink類名，並設置了一個懸浮效果：

　　a.iconlink {

　　font-family: 'youriconfont';

　　text-decoration:none;

　　color: #666666;

　　}

　　a.iconlink:hover {

　　text-decoration:none;

　　color: #999999;

　　}

　　8、先進的想法

　　正如我們剛剛懸停狀下改變圖標顏色一樣，我們可以使用的顏色屬性和字體屬性修改圖標。你可以設置其