使用Illustrator和Icomoon創建圖標字體

創建自定義圖標字體：使用Illustrator和IcoMoon打造專屬圖標系統

核心要點：

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

圖片來自：listentoreason

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

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

向項目添加圖標集的兩種常用方法：

1. 網頁字體
2. SVG

本文將介紹網頁字體。 SVG將在另一篇文章中介紹。

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

創建自己的圖標

要構建自己的圖標字體，第一步是設計圖標——我們將為此任務使用Illustrator——然後將它們保存為SVG格式。

確定設計風格

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

首先，在不同尺寸下進行一些可讀性測試，並構建一個用於繪製所有字形的模板。設計在較低分辨率下不起作用的細節精美的圖標毫無用處。

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

然後，您可以為字形確定網格大小。我的建議是不要直接在目標大小（例如16x16px）或非常大的尺寸下繪製。相反，我發現60-80px的網格對我來說通常很好。從此尺寸向上或向下縮放通常很成功。

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

在本文中，我選擇使用8px的筆觸繪製圖標，不填充，並設置在64x64px的網格內。

開始繪製

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

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

現在我們可以開始創建一個新的64x64px Illustrator文檔：

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

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

Illustrator工作區

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

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

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

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

簡而言之，使用畫板標尺系統：

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

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

設置網格

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

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

我們的網格現在應該與我們的畫板完美對齊：

第一個字形

讓我們開始我們的第一個字形，一個簡單的複選標記在圓圈內：

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

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

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

完成字形繪製

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

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

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

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

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

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

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

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

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

將文件上傳到IcoMoon

IcoMoon網站提供一個在線應用程序來構建圖標字體。該應用程序從未命名項目開始，可以訪問一些免費的圖標庫，您可以從中選擇符號。

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

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

現在，您可以使用“導入圖標”按鈕上傳您的SVG文件：您的字形將作為集合出現在應用程序中。可以使用應用程序在此階段提供的工具輕鬆重新排列、刪除或編輯每個字形。您還可以編輯集合元數據（集合的名稱和一些作者信息）或使用集合右側的小菜單執行其他任務。

可以使用編輯工具在應用程序中編輯圖標。您不能以這種方式更改矢量數據，但可以調整大小或移動字形、下載SVG文件或替換它。

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

該應用程序將加載一個包含所有選定符號的輔助窗口，為每個符號顯示字形、名稱和IcoMoon在PUA範圍內分配給它的Unicode點。使用PUA範圍被認為是在PUA範圍內託管圖標的最安全的Unicode區域，儘管如果您願意，IcoMoon允許您通過單擊頂部的“代碼”按鈕來使用標準的基本拉丁範圍。

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

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

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

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

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

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

@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 */

開始嘗試吧！

我發現這是構建圖標字體的一種非常快速的方法，但找到完美的工作流程並測試Illustrator和IcoMoon都能提供的全部選項肯定需要時間。

祝您玩得開心！

(以下為FAQ部分，已根據原文進行改寫和整合，並調整了格式)

關於使用Illustrator和IcoMoon創建圖標字體的常見問題解答 (FAQ)

Q：使用IcoMoon創建圖標字體的優勢是什麼？

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

Q：如何將我自己的SVG導入IcoMoon？

A：要將您自己的SVG導入IcoMoon，首先確保您的SVG已正確優化。然後，轉到IcoMoon應用程序並單擊“導入圖標”按鈕。在那裡，您可以選擇並上傳您的SVG文件。上傳後，您的圖標將出現在“您的自定義圖標”部分，準備添加到您的圖標集中。

Q：可以使用Adobe Illustrator為IcoMoon創建SVG嗎？

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

Q：如何在IcoMoon中控製圖標的大小和顏色？

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

Q：在IcoMoon中創建圖標字體的最佳實踐是什麼？

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

Q：可以使用IcoMoon為商業項目創建圖標字體嗎？

A：是的，您可以使用IcoMoon為商業項目創建圖標字體。但是，您應該知道，IcoMoon提供的一些圖標受許可限制。在商業項目中使用圖標之前，請務必檢查圖標的許可證。

Q：如何將我的圖標字體添加到我的網站？

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

Q：在IcoMoon中創建圖標集後，可以編輯它嗎？

A：是的，在IcoMoon中創建圖標集後，您可以編輯它。為此，請轉到IcoMoon應用程序中的“管理項目”部分。在那裡，您可以選擇您的項目並對圖標集進行任何必要的更改。

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

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

Q：如果在IcoMoon中創建圖標字體時遇到問題，該怎麼辦？

A：如果您在IcoMoon中創建圖標字體時遇到問題，可以參考IcoMoon文檔或聯繫IcoMoon支持團隊尋求幫助。此外，還有許多在線社區和論壇，您可以在那裡尋求幫助和建議。

以上是使用Illustrator和Icomoon創建圖標字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！