使用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中文网其他相关文章！