創(chuàng)建自定義圖標(biāo)字體：使用Illustrator和IcoMoon打造專屬圖標(biāo)系統(tǒng)

核心要點：

• 自定義圖標(biāo)系統(tǒng)是網(wǎng)頁項目中重要的設(shè)計元素，創(chuàng)建專屬圖標(biāo)集有助於更好地協(xié)調(diào)項目設(shè)計。 Illustrator和IcoMoon等工具能簡化此過程。
• 創(chuàng)建圖標(biāo)字體，首先在Illustrator中設(shè)計圖標(biāo)並保存為SVG文件。在開始繪製前，務(wù)必定義字形的樣式屬性，例如筆觸大小和網(wǎng)格比例。
• 圖標(biāo)設(shè)計並保存為SVG文件後，即可上傳到IcoMoon生成圖標(biāo)字體。 IcoMoon應(yīng)用允許導(dǎo)入SVG文件、排列和編輯它們，然後編譯成字體。
• IcoMoon應(yīng)用提供包含必要瀏覽器兼容性修復(fù)的圖標(biāo)字體CSS文件。此文件包含@font-face規(guī)則和所有符號選擇器，可包含在網(wǎng)站HTML中，從而將自定義圖標(biāo)字體添加到網(wǎng)頁項目。

圖標(biāo)系統(tǒng)通常是網(wǎng)頁項目中的核心設(shè)計元素。網(wǎng)上有很多免費或商業(yè)圖標(biāo)集，它們通常包含在主要的CSS框架中（Bootstrap 3 Glyphicons就是一個很好的例子）。

然而，有時您可能需要通用集中未包含的更具體的字形。或者您可能只想更好地協(xié)調(diào)圖標(biāo)設(shè)計與項目中的其他設(shè)計元素。在這些情況下，您需要從頭開始繪製新的圖標(biāo)集。

向項目添加圖標(biāo)集的兩種常用方法：

1. 網(wǎng)頁字體
2. SVG

本文將介紹網(wǎng)頁字體。 SVG將在另一篇文章中介紹。

傳統(tǒng)上，字體創(chuàng)建是一項困難且要求很高的任務(wù)，但值得慶幸的是，由於IcoMoon、Fontastic或Fontello等簡易在線工具的出現(xiàn)，創(chuàng)建圖標(biāo)字體集已變得容易得多。每個工具都允許您通過從公共庫中“挑選”預(yù)建圖標(biāo)或上傳和編譯自己準(zhǔn)備的SVG文件來構(gòu)建字體。

創(chuàng)建自己的圖標(biāo)

要構(gòu)建自己的圖標(biāo)字體，第一步是設(shè)計圖標(biāo)——我們將為此任務(wù)使用Illustrator——然後將它們保存為SVG格式。

確定設(shè)計風(fēng)格

在開始繪製之前，您需要定義字形的樣式屬性，例如筆觸大小、網(wǎng)格比例等。

首先，在不同尺寸下進(jìn)行一些可讀性測試，並構(gòu)建一個用於繪製所有字形的模板。設(shè)計在較低分辨率下不起作用的細(xì)節(jié)精美的圖標(biāo)毫無用處。

在繪製之前繪製字體草圖也很有用，即使是很粗略的草圖（如下所示）也能幫助您找到所需所有符號的想法。

然後，您可以為字形確定網(wǎng)格大小。我的建議是不要直接在目標(biāo)大?。ɡ?6x16px）或非常大的尺寸下繪製。相反，我發(fā)現(xiàn)60-80px的網(wǎng)格對我來說通常很好。從此尺寸向上或向下縮放通常很成功。

當(dāng)然，這不是一個“一成不變”的規(guī)則：項目需求和經(jīng)驗可能會因情況而異。

在本文中，我選擇使用8px的筆觸繪製圖標(biāo)，不填充，並設(shè)置在64x64px的網(wǎng)格內(nèi)。

開始繪製

Illustrator畫闆對此工作非常有用：您可以在不同的畫板中繪製每個字形，並將每個字形保存在單個文件中。畫板可以重新排列、重命名，並且可以導(dǎo)出為獨立的SVG文件（這正是我們IcoMoon所需的）。

每個畫板也可以具有獨立的軸坐標(biāo)，這對於對像對齊非常有價值，我們稍後將看到這一點。

現(xiàn)在我們可以開始創(chuàng)建一個新的64x64px Illustrator文檔：

請注意，您可以使用“畫板數(shù)量”選項開始創(chuàng)建所有所需的畫板：我更喜歡根據(jù)需要添加畫板，但沒有理由不能先創(chuàng)建所有畫板。

現(xiàn)在我們可以設(shè)置網(wǎng)格。我們希望它從每個畫板原點（左上角）開始，並將畫板分成8x8的棋盤格。在此之前，讓我們快速了解一下Illustrator坐標(biāo)系的工作方式。

Illustrator工作區(qū)

Illustrator工作區(qū)由包含一個或多個畫板的畫布組成。

畫板放置在畫布上，從稱為全局標(biāo)尺原點的點開始。此外，每個畫板也都有其自己的原點和標(biāo)尺。

當(dāng)您使用畫板工具定位新的畫板時，您將始終使用全局標(biāo)尺。在幾乎所有其他情況下，您將根據(jù)“視圖”→“標(biāo)尺”→“更改為畫板”（或全局）標(biāo)尺選項使用畫板標(biāo)尺。

如果您使用的是全局標(biāo)尺，則在任何畫板上繪製的每個對像都是相對於該單個原點（即全局標(biāo)尺原點）繪製的。否則，坐標(biāo)將參考包含它的畫板的原點。

簡而言之，使用畫板標(biāo)尺系統(tǒng)：

• 畫板根據(jù)全局標(biāo)尺原點放置在畫布中
• 我們繪製的對像根據(jù)畫板標(biāo)尺原點放置在畫板中（在下圖中，您可以看到兩個正方形具有相同的坐標(biāo)值，即使它們放置在兩個不同的畫板中） 。

對於這項工作，我們將使用畫板標(biāo)尺，因為它更適合字形對齊。

設(shè)置網(wǎng)格

Illustrator的網(wǎng)格放置在從全局標(biāo)尺原點開始的工作區(qū)上。您可以選擇“首選項”→“參考線和網(wǎng)格”來設(shè)置其屬性。由於我們希望將我們的64x64px畫布分成8個部分，每邊一個，我們將每16px設(shè)置一個主網(wǎng)格線（這將導(dǎo)致我們的畫板分成4x4個部分），並進(jìn)行兩次細(xì)分：

現(xiàn)在我們必須確保我們的網(wǎng)格與我們的畫板完全匹配。默認(rèn)情況下，第一個畫板放置在全局標(biāo)尺原點，但是，由於畫板可以移動和重置：為此，只需使用畫板工具雙擊標(biāo)尺原點即可。

我們的網(wǎng)格現(xiàn)在應(yīng)該與我們的畫板完美對齊：

第一個字形

讓我們開始我們的第一個字形，一個簡單的複選標(biāo)記在圓圈內(nèi)：

要繪製圓圈，我們必須選擇橢圓工具，單擊畫板內(nèi)的某個點並輸入橢圓的寬度和高度：

接下來，我們必須刪除任何填充並設(shè)置8px大小的黑色筆觸。此時，我們可以將圓圈與畫闆對齊（確保選中“對齊到畫板”選項）：

但結(jié)果並非我們預(yù)期的那樣：Illustrator對齊了路徑而沒有計算筆觸寬度。值得慶幸的是，這可以通過在“首選項”面板中設(shè)置“使用預(yù)覽邊界”選項輕鬆解決?，F(xiàn)在，Illustrator將計算畫板內(nèi)的筆觸寬度，而不管對齊和大小調(diào)整如何，這使得繪圖更快、更準(zhǔn)確。

完成字形繪製

現(xiàn)在我們必須繪製每個字形，每次添加一個新的畫板。您可以使用畫板工具和選項/alt拖動現(xiàn)有畫板或單擊畫板面板中的“新建畫板”圖標(biāo)來添加畫板。

然後，可以通過選擇“對象”→“畫板”→“重新排列”（或畫板面板菜單中的“重新排列畫板”命令）並按照畫板面板中的順序來輕鬆重新排列畫板。

請注意，字形始終按字母順序上傳，因此如果您希望Illustrator中的畫板順序與字體中的字形順序匹配，請記住這一點。

為每個畫板命名（無空格）：這將成為字形的名稱，也是生成的CSS的類名，因此使用有意義的詞語非常重要。

儘管我們經(jīng)常使用筆觸來繪製符號，但字體創(chuàng)建有一些特殊需求。我們必須記住：

• 每個筆觸都必須轉(zhuǎn)換為填充
• 填充必須組合起來創(chuàng)建複合路徑（如有必要）（無重疊形狀）
• 將忽略任何顏色：字形將始終解釋為黑色。您也不能使用白色作為背景：您只能使用透明背景
• 將忽略SVG中的任何嵌入式圖像

您可以使用“擴(kuò)展”命令將路徑轉(zhuǎn)換為填充形狀，並使用“路徑查找器”面板將重疊形狀快速組合成單個元素。

字形準(zhǔn)備就緒後，我們可以使用“使用畫板”選項在“另存為”對話框中將每個字形保存為單獨的SVG文件。

Illustrator通過在.ai文檔名稱（icons_）前添加前綴來保存SVG文件。由於IcoMoon使用文件名作為字形，我更喜歡刪除此前綴（有很多小型應(yīng)用程序可以輕鬆重命名所有文件）以減少任何混淆。

將文件上傳到IcoMoon

IcoMoon網(wǎng)站提供一個在線應(yīng)用程序來構(gòu)建圖標(biāo)字體。該應(yīng)用程序從未命名項目開始，可以訪問一些免費的圖標(biāo)庫，您可以從中選擇符號。

由於我們將上傳自己的字形，我們可以使用每個庫右側(cè)的小菜單刪除所有預(yù)加載的庫（請注意，這不是強制性的，因為只有選定的符號將添加到您的字體中）。它只是讓您的項目保持簡潔。

然後，您可以單擊應(yīng)用程序菜單欄右側(cè)的“管理項目”圖標(biāo)來保存您的項目。請注意，使用IcoMoon免費帳戶，您的項目將存儲在您的瀏覽器中，因此，在您下載項目數(shù)據(jù)（JSON文件）或升級到高級帳戶（允許您將項目存儲在雲(yún)中）之前，您將無法在其他地方訪問它。

現(xiàn)在，您可以使用“導(dǎo)入圖標(biāo)”按鈕上傳您的SVG文件：您的字形將作為集合出現(xiàn)在應(yīng)用程序中。可以使用應(yīng)用程序在此階段提供的工具輕鬆重新排列、刪除或編輯每個字形。您還可以編輯集合元數(shù)據(jù)（集合的名稱和一些作者信息）或使用集合右側(cè)的小菜單執(zhí)行其他任務(wù)。

可以使用編輯工具在應(yīng)用程序中編輯圖標(biāo)。您不能以這種方式更改矢量數(shù)據(jù)，但可以調(diào)整大小或移動字形、下載SVG文件或替換它。

要構(gòu)建字體，您首先需要使用選擇工具選擇所有必需的圖標(biāo)（如果合適，也可以使用集合菜單中的“全選/全不選”命令）。您可以通過其黃色邊框識別選定的字形。然後，您必須單擊頁面底部的“字體”按鈕。

該應(yīng)用程序?qū)⒓虞d一個包含所有選定符號的輔助窗口，為每個符號顯示字形、名稱和IcoMoon在PUA範(fàn)圍內(nèi)分配給它的Unicode點。使用PUA範(fàn)圍被認(rèn)為是在PUA範(fàn)圍內(nèi)託管圖標(biāo)的最安全的Unicode區(qū)域，儘管如果您願意，IcoMoon允許您通過單擊頂部的“代碼”按鈕來使用標(biāo)準(zhǔn)的基本拉丁範(fàn)圍。

您還可以通過手動插入新代碼或字符來為每個字符分配不同的範(fàn)圍代碼：

在下載字體之前，添加字體名稱（這將用於@font-face規(guī)則），以及類前綴和/或後綴（這將用作生成的CSS中的選擇器）。

您可以設(shè)置許多其他參數(shù)：從元數(shù)據(jù)信息到指標(biāo)值，我建議仔細(xì)閱讀簡短且解釋得很好的文檔以正確設(shè)置所有參數(shù)。

您的圖標(biāo)集已完成！下載您的字體（或者，如果您有高級帳戶，只需鏈接到CSS）並將其添加到您的項目中。

下載的.zip文件包含各種格式的字體、您可以用作參考的演示文件、可以重新上傳以恢復(fù)項目的.json文件（例如，在另一臺計算機(jī)上查看它），當(dāng)然還有編碼圖標(biāo)的.css文件。

CSS（您可以在下面看到一個示例）包含@font-face規(guī)則和所有符號選擇器。

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-88cxph');
    src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
        url('fonts/icomoon.woff?-88cxph') format('woff'),
        url('fonts/icomoon.ttf?-88cxph') format('truetype'),
        url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="myicon-"], [class*=" myicon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.myicon-alert:before {
    content: "\e600";
}
.myicon-arrow-down:before {
    content: "";
}

/* etc */

開始嘗試吧！

我發(fā)現(xiàn)這是構(gòu)建圖標(biāo)字體的一種非?？焖俚姆椒?，但找到完美的工作流程並測試Illustrator和IcoMoon都能提供的全部選項肯定需要時間。

祝您玩得開心！

(以下為FAQ部分，已根據(jù)原文進(jìn)行改寫和整合，並調(diào)整了格式)

關(guān)於使用Illustrator和IcoMoon創(chuàng)建圖標(biāo)字體的常見問題解答 (FAQ)

Q：使用IcoMoon創(chuàng)建圖標(biāo)字體的優(yōu)勢是什麼？

A：IcoMoon是一個強大的工具，允許您構(gòu)建和管理自己的圖標(biāo)集。它提供了各種各樣的圖標(biāo)可供選擇，您還可以導(dǎo)入自己的SVG來創(chuàng)建自定義圖標(biāo)字體。使用IcoMoon的優(yōu)勢在於它簡化了創(chuàng)建圖標(biāo)字體的過程，即使是初學(xué)者也能輕鬆上手。它還允許您控製圖標(biāo)的大小、顏色和其他CSS屬性，從而在設(shè)計方面提供更大的靈活性。

Q：如何將我自己的SVG導(dǎo)入IcoMoon？

A：要將您自己的SVG導(dǎo)入IcoMoon，首先確保您的SVG已正確優(yōu)化。然後，轉(zhuǎn)到IcoMoon應(yīng)用程序並單擊“導(dǎo)入圖標(biāo)”按鈕。在那裡，您可以選擇並上傳您的SVG文件。上傳後，您的圖標(biāo)將出現(xiàn)在“您的自定義圖標(biāo)”部分，準(zhǔn)備添加到您的圖標(biāo)集中。

Q：可以使用Adobe Illustrator為IcoMoon創(chuàng)建SVG嗎？

A：是的，您可以使用Adobe Illustrator為IcoMoon創(chuàng)建SVG。 Illustrator是一個強大的矢量圖形編輯器，允許您創(chuàng)建和編輯SVG文件。在Illustrator中創(chuàng)建圖標(biāo)後，您可以將其導(dǎo)出為SVG文件，然後將其導(dǎo)入IcoMoon以創(chuàng)建圖標(biāo)字體。

Q：如何在IcoMoon中控製圖標(biāo)的大小和顏色？

A：在IcoMoon中，可以使用CSS控製圖標(biāo)的大小和顏色。生成圖標(biāo)字體時，IcoMoon會提供一個CSS文件，其中包含每個圖標(biāo)的類。您可以編輯此CSS文件以更改圖標(biāo)的大小、顏色和其他屬性。

Q：在IcoMoon中創(chuàng)建圖標(biāo)字體的最佳實踐是什麼？

A：在IcoMoon中創(chuàng)建圖標(biāo)字體時，務(wù)必牢記一些最佳實踐。首先，確保在將SVG導(dǎo)入IcoMoon之前已正確優(yōu)化。其次，盡量使圖標(biāo)集盡可能小，以減少網(wǎng)站的加載時間。最後，請記住在不同的瀏覽器中測試您的圖標(biāo)字體，以確保其正確顯示。

Q：可以使用IcoMoon為商業(yè)項目創(chuàng)建圖標(biāo)字體嗎？

A：是的，您可以使用IcoMoon為商業(yè)項目創(chuàng)建圖標(biāo)字體。但是，您應(yīng)該知道，IcoMoon提供的一些圖標(biāo)受許可限制。在商業(yè)項目中使用圖標(biāo)之前，請務(wù)必檢查圖標(biāo)的許可證。

Q：如何將我的圖標(biāo)字體添加到我的網(wǎng)站？

A：在IcoMoon中創(chuàng)建圖標(biāo)字體後，您可以通過將IcoMoon提供的CSS文件包含在網(wǎng)站的HTML中將其添加到您的網(wǎng)站。然後，您可以使用CSS文件中定義的類將圖標(biāo)添加到您的網(wǎng)站。

Q：在IcoMoon中創(chuàng)建圖標(biāo)集後，可以編輯它嗎？

A：是的，在IcoMoon中創(chuàng)建圖標(biāo)集後，您可以編輯它。為此，請轉(zhuǎn)到IcoMoon應(yīng)用程序中的“管理項目”部分。在那裡，您可以選擇您的項目並對圖標(biāo)集進(jìn)行任何必要的更改。

Q：如何確保我的圖標(biāo)字體在所有瀏覽器中都能正確顯示？

A：要確保您的圖標(biāo)字體在所有瀏覽器中都能正確顯示，務(wù)必在開發(fā)過程中在不同的瀏覽器中進(jìn)行測試。此外，IcoMoon會提供一個包含必要瀏覽器兼容性修復(fù)的圖標(biāo)字體CSS文件。

Q：如果在IcoMoon中創(chuàng)建圖標(biāo)字體時遇到問題，該怎麼辦？

A：如果您在IcoMoon中創(chuàng)建圖標(biāo)字體時遇到問題，可以參考IcoMoon文檔或聯(lián)繫IcoMoon支持團(tuán)隊尋求幫助。此外，還有許多在線社區(qū)和論壇，您可以在那裡尋求幫助和建議。

以上是使用Illustrator和Icomoon創(chuàng)建圖標(biāo)字體的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！