2015-9-17 博博
藍(lán)藍(lán)設(shè)計( m.skdbbs.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
1
2
3
4
5
6
在這篇教程中，我們將看看如何使用一個免費的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)就會馬上渲染出來，不需要下載一個圖像。
可擴展性：圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小。這使您能夠隨時輸出不同大小的圖標(biāo)，然而，使用位圖，你必須得為每個不同大小的圖像輸出一個不同文件。
靈活性：文字效果可以很容易地應(yīng)用到你的圖標(biāo)上，包括顏色，陰影和翻轉(zhuǎn)等效果。他們還可以在任何背景下顯示。
兼容性：網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括IE低版本。詳細(xì)兼容性可以點擊這里。
1、準(zhǔn)備你的插圖
首先，你需要能創(chuàng)建矢量圖標(biāo)的程序，并且能夠找到輸出SVG格式，比如“Illustrator”或者“iNkscape”。
當(dāng)你設(shè)計的時候，你可以使用任何你喜歡的顏色，但是圖標(biāo)必須是一個純色。確保每個圖標(biāo)的尺寸大小是相同的。有一個圖標(biāo)更高或者更寬，會很難創(chuàng)建一個一致的字體。在這里，我們不得不減少飛艇圖標(biāo)的寬度，以便它匹配其他圖標(biāo)。
2、清理
仔細(xì)檢查每一個圖標(biāo)，以確保它沒有缺陷——細(xì)節(jié)在小尺寸上是完全的，當(dāng)你放大的時候小的缺陷就能被發(fā)現(xiàn)。在所示圖標(biāo)，我需要刪除參差不齊的路徑。
在Illustrator中，使用Pathfinder工具統(tǒng)一層疊元素，減去前面元素，比如這些圖標(biāo)中的星星圖標(biāo)。
關(guān)鍵的原則是確保你的圖標(biāo)是可讀的小尺寸。心可能的簡化。
3、導(dǎo)成svg
現(xiàn)在，選擇一個圖標(biāo)，并將它復(fù)制粘貼到一個新的文檔場景中（例如200px X 200px）。縮放也是符合。你可能會發(fā)現(xiàn)它有一個基線尺寸的設(shè)置。使用彩色的圖標(biāo)，比如說在白色的背景中使用黑色的圖標(biāo)。
現(xiàn)在，選擇菜單“文件”中“保存”，并選擇將文件保存成“SVG”格式。使用默認(rèn)的SVG設(shè)置。一旦你這樣做，所有的圖標(biāo)，你可以創(chuàng)建一個Web字體。
4、導(dǎo)入到IcoMoon
打開IcoMoon Web app。 導(dǎo)入一個圖標(biāo)，點擊“Imort icons”按鈕，然后選擇您想要添加的SVG文件——您也可以一次添加多個文件。這些圖標(biāo)將會出現(xiàn)在“Your Custom Icons”區(qū)域中。如果他們是高亮的黃色顯示，表示這些圖標(biāo)是你將要創(chuàng)建的圖標(biāo)字體。在這個例子中，你可以看到，我不僅導(dǎo)出我自己創(chuàng)建的圖標(biāo)，我還在 “Mini-icons”中添加了別的圖標(biāo)。
5、從IcoMoon中導(dǎo)出字體
如果你想調(diào)整圖標(biāo)的位置、大小或旋轉(zhuǎn)，你可以點擊“Edit”按鈕。可以使用“Save Copy”按鈕來創(chuàng)建圖片的變化（例如，一個鏡像的釁標(biāo)）。添加一個有意義的圖標(biāo)標(biāo)記，因為這將被用來生成類名。
當(dāng) 你都準(zhǔn)備好了，點擊屏幕底部的“Font”按鈕開始生成字體。這樣你就可以指定哪個圖標(biāo)映射到哪個字符上，例如，如果你要設(shè)置一套六個旋轉(zhuǎn)的球，你可以每 這六個球分別指定字符：q、w、e、r、t和y。你也可以根據(jù)你自己的愛好選擇一個字體的名字。你也可以調(diào)整字體的指標(biāo)，除非你要設(shè)置你息定的字體和標(biāo)準(zhǔn) 文本，不然你真的不需要擔(dān)心這個。
6、下載字體文件
單擊“Download”下載字體包到你的電腦上。他有一個字文件夾包含了字體本身（woff,eot,ttf格式），以及一個HTML示例頁面和相應(yīng)的CSS。甚至還有一個javascript文件和一個解決方法，如果你需要支持IE或IE7。
將 font文件夾復(fù)制到你的網(wǎng)站，為你的項目添加字體。你需要從style.css文件中復(fù)制CSS樣式，并粘貼到你網(wǎng)站的CSS文件中，但是我的方法是將 它重命名為font.css，并保持他作為一個單獨的CSS文件。你需要的時候在把這個CSS文件引入到你的HTML中。
7、調(diào)用字體
正如你看到的樣本文件index.html，有兩種方法可以調(diào)用，一種是通字符（unicod或名稱），另一種是通過類名。第一個例子使用了HTML5的data-icon自定義屬性。
在這里，fs1類名用于設(shè)置字體的大小。這個“aria-hidden”屬性有助于確保字符能屏幕閱讀器讀到。
第二種方法使用一個span元素：
這個方法是非常有用的，你的字符可以與文本在內(nèi)聯(lián)中一起顯示。
8、先進(jìn)的想法
正如我們剛剛懸停狀下改變圖標(biāo)顏色一樣，我們可以使用的顏色屬性和字體屬性修改圖標(biāo)。你可以設(shè)置其他屬，比如文本陰影和透明度，來設(shè)置圖標(biāo)的效果。
藍(lán)藍(lán)設(shè)計的小編 http://m.skdbbs.com