如何把你的圖標轉換成web字體 - HTML/CSS - 穀子博客
http://www.guzii.com/article/show-1-46.html
在這篇教程中，我們將使用一個免費的Web應用程序IcoMoon將矢量圖轉換成Web字體，然後將生成的字體通過css應用到Web頁面中。
通常我們在網站中必不可少的會使用到一些小圖標。在正常尺寸下，佈局看上去一切OK，但當我們將頁面進行放大顯示後，你會發現icon圖標變得有些模糊，而基於文本的標題依然清晰可見。爲了適應各種情況，我們有必要試着解決它：
㑪解決方案：創建雙倍大小的Sprite圖，然後通過css樣式，設置他們只顯示二分之一尺寸。
雖然這樣的方法讓他們在Retina屏上顯示的大小是正常的，一旦你開始放大屏幕，圖標又變得模糊不清，但文本還是一樣的清晰。
答案很明顯，我需要把我的圖標變成一個字體。
使用字體圖標的優勢
-
適用性：一個圖標字體比一系列的圖像要小。一旦圖標字體加載了，你的圖標就會馬上渲染出來，不需要下載一個圖像。
-
可擴展性：圖標字體可以用font-size屬性設置其任何大小。
-
靈活性：文字效果可以很容易地應用到你的圖標上，包括顏色，陰影和翻轉等效果。
-
兼容性：網頁字體支持所有現代瀏覽器(包括IE6)。
創建一個圖標字體
創建字體，我們可以使用一個專業的字體創建應用程序，比如說Glyphs。但目前我們想構建一個簡單的圖標字體，比如說間距和粗細這樣的物理關係並不是非常重要，使用Glyphs是否有點大材小用了。
創建一個圖標字體，最簡單的方法是使用Keyamoon製作的一個Web應用程序IcoMoon。這個應用程序解決了創建字體文件和如何使用創建的圖標字體的一切麻煩。
IcoMoon附帶了大量的圖標，你也可以通過圖標庫添加更多的圖標，其中大部分都可以免費使用。你會發現，使用標準的圖標比你自己創建的要方便得多。
一起開始吧！
1、準備你的插圖
首先，你需要能創建矢量圖標的程序，並且能夠找到輸出SVG格式，比如“Illustrator”或者“iNkscape”。
當你設計的時候，你可以使用任何你喜歡的顏色，但是圖標必須是一個純色。確保每個圖標的尺寸大小是相同的。有一個圖標更高或者更寬，會很難創建一個一致的字體。在這裏，我們不得不減少飛艇圖標的寬度，以便它匹配其他圖標。
2、清理
仔細檢查每一個圖標，以確保它沒有缺陷——細節在小尺寸上是完美的，當你放大的時候小的缺陷就能被發現。
在所示圖標，我需要刪除參差不齊的路徑。
Illustrator中，使用Pathfinder工具統一層疊元素，減去前面元素，比如這些圖標中的星星圖標。關鍵的原則是確保你的圖標是可讀的小尺寸。
3、導成svg
現在，選擇一個圖標，並將它複製粘貼到一個新的文檔場景中（例如200px * 200px）。你可能會發現它有一個基線尺寸的設置。使用彩色的圖標，比如說在白色的背景中使用黑色的圖標。
現在，選擇菜單“文件”中“保存”，並選擇將文件保存成“SVG”格式。使用默認的SVG設置。一旦你這樣做，所有的圖標，你可以創建一個Web字體。
4、導入到IcoMoon
打開IcoMoon Web app,導入一個圖標(SVG格式哦)，點擊“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自定義屬性。
來源：花美男， 如若轉載，請註明出處：(如何把你的圖標轉換成web字體)