如何把你的圖標(biāo)轉(zhuǎn)換成web字體

@w3cplus?我已經(jīng)制為網(wǎng)站制作了一些優(yōu)雅的圖標(biāo)，并且在新的網(wǎng)站和老的iPad上進(jìn)行了測(cè)試。正常尺寸下，布局看看上去一切OK，但的將頁面進(jìn)行放大顯示，我卻發(fā)現(xiàn)我的icon變得模糊不清，但是基于文本的標(biāo)題依然清晰可見。在具有Retina顯屏的iPad上，這些圖標(biāo)看上去都不清晰，即使在沒有進(jìn)行任何放大的情況之下。

我第一想法就是創(chuàng)建雙倍大小的Sprite圖，然后通過css樣式，設(shè)置他們只顯示二分之一尺寸。雖然這樣的方法讓他們?cè)赗etina屏上顯示的大小是正常的，一旦你開始放大屏幕，圖標(biāo)又變得模糊不清。但文本還是一樣的清晰。
答案很明顯，我需要把我的圖標(biāo)變成一個(gè)字體。

在這篇教程中，我們將看看如何使用一個(gè)免費(fèi)的Web應(yīng)用程序IcoMoon將矢量圖轉(zhuǎn)換成Web字體。然后在看看如何使用生成的字體通過css應(yīng)用到Web頁面中。

使用字體圖標(biāo)的優(yōu)勢(shì)

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

• 適用性：一個(gè)圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍大小的圖像）要小。一旦圖標(biāo)字體加載了，你的圖標(biāo)就會(huì)馬上渲染出來，不需要下載一個(gè)圖像。
• 可擴(kuò)展性：圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小。這使您能夠隨時(shí)輸出不同大小的圖標(biāo)，然而，使用位圖，你必須得為每個(gè)不同大小的圖像輸出一個(gè)不同文件。
• 靈活性：文字效果可以很容易地應(yīng)用到你的圖標(biāo)上，包括顏色，陰影和翻轉(zhuǎn)等效果。他們還可以在任何背景下顯示。
• 兼容性：網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括IE低版本。詳細(xì)兼容性可以點(diǎn)擊這里。

我們開始吧！

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

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

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

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

一步一步

1、準(zhǔn)備你的插圖

首先，你需要能創(chuàng)建矢量圖標(biāo)的程序，并且能夠找到輸出SVG格式，比如“Illustrator”或者“iNkscape”。

當(dāng)你設(shè)計(jì)的時(shí)候，你可以使用任何你喜歡的顏色，但是圖標(biāo)必須是一個(gè)純色。確保每個(gè)圖標(biāo)的尺寸大小是相同的。有一個(gè)圖標(biāo)更高或者更寬，會(huì)很難創(chuàng)建一個(gè)一致的字體。在這里，我們不得不減少飛艇圖標(biāo)的寬度，以便它匹配其他圖標(biāo)。

2、清理

仔細(xì)檢查每一個(gè)圖標(biāo)，以確保它沒有缺陷——細(xì)節(jié)在小尺寸上是完全的，當(dāng)你放大的時(shí)候小的缺陷就能被發(fā)現(xiàn)。在所示圖標(biāo)，我需要?jiǎng)h除參差不齊的路徑。

在Illustrator中，使用Pathfinder工具統(tǒng)一層疊元素，減去前面元素，比如這些圖標(biāo)中的星星圖標(biāo)。

關(guān)鍵的原則是確保你的圖標(biāo)是可讀的小尺寸。心可能的簡(jiǎn)化。

3、導(dǎo)成svg

現(xiàn)在，選擇一個(gè)圖標(biāo)，并將它復(fù)制粘貼到一個(gè)新的文檔場(chǎng)景中（例如200px X 200px）。縮放也是符合。你可能會(huì)發(fā)現(xiàn)它有一個(gè)基線尺寸的設(shè)置。使用彩色的圖標(biāo)，比如說在白色的背景中使用黑色的圖標(biāo)。

現(xiàn)在，選擇菜單“文件”中“保存”，并選擇將文件保存成“SVG”格式。使用默認(rèn)的SVG設(shè)置。一旦你這樣做，所有的圖標(biāo)，你可以創(chuàng)建一個(gè)Web字體。

4、導(dǎo)入到IcoMoon

打開IcoMoon Web app。導(dǎo)入一個(gè)圖標(biāo)，點(diǎn)擊“Imort icons”按鈕，然后選擇您想要添加的SVG文件——您也可以一次添加多個(gè)文件。這些圖標(biāo)將會(huì)出現(xiàn)在“Your Custom Icons”區(qū)域中。如果他們是高亮的黃色顯示，表示這些圖標(biāo)是你將要?jiǎng)?chuàng)建的圖標(biāo)字體。在這個(gè)例子中，你可以看到，我不僅導(dǎo)出我自己創(chuàng)建的圖標(biāo)，我還在“Mini-icons”中添加了別的圖標(biāo)。

5、從IcoMoon中導(dǎo)出字體

如果你想調(diào)整圖標(biāo)的位置、大小或旋轉(zhuǎn)，你可以點(diǎn)擊“Edit”按鈕。可以使用“Save Copy”按鈕來創(chuàng)建圖片的變化（例如，一個(gè)鏡像的釁標(biāo)）。添加一個(gè)有意義的圖標(biāo)標(biāo)記，因?yàn)檫@將被用來生成類名。

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

6、下載字體文件

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

將font文件夾復(fù)制到你的網(wǎng)站，為你的項(xiàng)目添加字體。你需要從style.css文件中復(fù)制CSS樣式，并粘貼到你網(wǎng)站的CSS文件中，但是我的方法是將它重命名為font.css，并保持他作為一個(gè)單獨(dú)的CSS文件。你需要的時(shí)候在把這個(gè)CSS文件引入到你的HTML中。

<link rel="stylesheet" target="_blank"  />

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

7、調(diào)用字體

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

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

在這里，fs1類名用于設(shè)置字體的大小。這個(gè)“aria-hidden”屬性有助于確保字符能屏幕閱讀器讀到。

第二種方法使用一個(gè)span元素：

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

這個(gè)方法是非常有用的，你的字符可以與文本在內(nèi)聯(lián)中一起顯示。

如果你想讓圖標(biāo)具有鏈接功能，你可以將放在一個(gè)鏈接中：

<a target="_blank" href="
http://www.yoursite.com
"  data-icon="s"></a>

在這里，我添加了一個(gè)iconlink類名，并設(shè)置了一個(gè)懸浮效果：

a.iconlink {
  font-family: 'youriconfont';
  text-decoration:none;
  color: #666666;
}
a.iconlink:hover {
  text-decoration:none;
  color: #999999;
}

8、先進(jìn)的想法

正如我們剛剛懸停狀下改變圖標(biāo)顏色一樣，我們可以使用的顏色屬性和字體屬性修改圖標(biāo)。你可以設(shè)置其他屬，比如文本陰影和透明度，來設(shè)置圖標(biāo)的效果。

嘗試它，我保證你永遠(yuǎn)不會(huì)再次使用位圖圖標(biāo)。
你有試過使用字體圖標(biāo)嗎？你找到了？如果你有好的想法請(qǐng)?jiān)谠u(píng)論中給我們留言，讓我們知道。

英文原文：webdesigner? ? ? 作者：Martin Gittins
中文譯文：w3cplus? ? ? 譯者：@w3cplus

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
“優(yōu)設(shè)網(wǎng)uisdc.com“是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請(qǐng)國內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量42萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì)?，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的”福利”嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：