使用矢量软件（如Inkscape）和Fontforge创建图标字体？

Question

通过在这里获得一些答案和研究，我发现了一种实现图标的新方法。与其作为图片或CSS背景，似乎可以将图标视为字体。

这种方法最终是否意味着创建一个文件包含每个图标分配给一个字符的字体集？因为这对我来说是如此新的方法，我真的想要确保我首先正确地处理它（我看到了巨大的潜力...比创建不同的图标、为每个不同的颜色和尺寸分别导出其自己的.png文件好多了）。

如果那是这种情况，那么需要记忆一段时间（特别是因为我有超过26个图标）。对于那些更有经验的字体制作人员，是否有一种方法可以说一个特定的单词=字符？

此外，关于在网站上实现这一点。我然后需要在CSS类/ID中指定字体类型（即font=icons; ）。然后我也可以通过CSS更改大小、颜色等吗？天啊，如果这真的是真的。我希望早点知道...这样就可以节省数小时的时间了。

无论如何，任何关于此事的帮助都将不胜感激。我正准备使用fontforge并开始学习（如果有更好的免费字体制作软件，请让我知道）。希望这能奏效。

- jstacks

---

我没有使用过FontForge，但是你必须创建一个带有连字的Open Type字体来完成这个任务。你要实现的技术与http://symbolset.com/相同。 - methodofaction

Answer 1

我成功地为我的网站创建了一些图标字体，通过 这篇教程 中提到的 Inkscape FontForge 方法相当可靠，如果你已经习惯使用像 Inkscape 这样的软件，也很容易操作。以下是我采用的步骤:

准备 (以 Inkscape 为例)

1. 打开包含你设计的图形的 Inkscape 文档。
2. 确保你已将所有形状、类型和线条转换为路径，并在轮廓模式下检查你的绘图，如果有问题，你可以随时回到基础文件进行更改。
3. 通过选择 新建 > fontforge_glyph 创建一个新文档。
4. 从设计中复制一个图标并粘贴到新文档中。
5. 调整图标的大小以适应提供的空间（虽然最好先在原始设计文档中调整所有图标的大小 - 视情况而定）。
6. 使用 Align 工具将图标居中于页面上（如果适用）。
7. 将绘图保存为 纯 SVG（如果按字母分配标题，则更容易，例如 "j.svg"）。
8. 对于其他图标重复此过程。

我经常会保留这个纯 SVG 文档，粘贴新的图标并根据上一个调整大小和居中。这样可以保持图标集的大小和位置一致（而且你不必不断选择目录以保存纯 SVG）。

---

字形创建 (使用 FontForge)

9. 为每个图标制作一个 SVG 文件后，打开 FontForge 并创建一个新的 FontForge 文档。
10. 在主字形显示列表窗口中，双击你拥有该图标的字母/数字。
11. 在这个新字形窗口中，选择 文件 > 导入 并选择一个你的 SVG 文件（你可能需要在文件对话框中更改文件筛选器以显示 SVG 文件）。
12. 如果导入时出现错误并且线框看起来像遭受了轻微的爆炸，你需要回到 Inkscape 解决路径问题。有一种简单的方法应该适用于大多数情况:

* In Inkscape, remove the fill of the icon.
* Add a thin stroke (1px will do).
* Convert the stroke to a path.
* The resulting shape will probably be missing a part of your icon.
* Undo all, then break icon apart and redraw/trace/correct the problem area.

---

使用FontForge创建字体

13. 回到FontForge中，当你添加了所有的图标后，你需要给你的字体起一个名字。在主窗口中，选择Element > Font info。
14. 更改以下内容：

* **Fontname**: MyFontMedium
* **Family name**: My Font
* **Name for humans**: My Font Medium
* **Weight**: Book (Win XP thinks medium = bold, so best to use Book)

15. 在主窗口中选择文件 > 生成字体，并保存为TrueType格式（忽略任何错误）。

---

字体验证/转换

16. 前往www.fontsquirrel.com/tools/webfont-generator或类似的服务上传您的TTF文件，并进行转换和校正。
17. 您下载的压缩文件将包含详细说明，说明如何将字体应用于您的网站项目中。

希望对您有所帮助。

- wayfarer_boy

---

经过进一步的研究，我发现这篇文章(http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/)建议你只需要使用Inkscape和其SVG字体编辑器面板(Text > SVG Font Editor)来构建你的网页字体。我没有尝试过这种方法，但很想知道它是否像使用Inkscape/FontForge那样有效。 - wayfarer_boy

我以前使用过Inkscape的SVG字体编辑器，但据我所知，它只允许您添加字形，而不能编辑它们（即我找不到一种方法将字形的形状加载到Inkscape的画布中进行操作）。它在其他方面也似乎非常有限，例如字形度量。 Inkscape + FontForge方法似乎是最简单的解决方案。 - Alan Plum

有没有保留颜色的机会？例如，我该如何制作一个表情符号字体？ - ulidtko

很遗憾，对于多彩字体的支持还不够充分。我建议使用SVG和CSS：通过:before调用来定位和嵌入彩色图标。如果您需要将每个图标的HTTP请求最小化，请将它们嵌入到CSS文件中：background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); - wayfarer_boy

SVG图形的复杂度有限制吗？我想在一个图标下面添加一行文本，然后将它们合并成一个新的图标，这样可以吗？ - Ben

Answer 2

这是一个开源示例，与您要做的内容相似：

http://fortawesome.github.com/Font-Awesome/

如果您查看他们的代码，您可以看到如何运行CSS：

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

如果您想编辑字体，请下载FontAwesome.ttf并在FontForge中进行编辑。 如果您想自己制作TTF，则可以看一下并复制他们的操作方式。

（免责声明：我没有完成这个过程的部分。在我们的团队中，有一个人使用专有的Mac应用程序来创建字体。如果将来需要自己制作图标字体，我可能会使用Inkscape和FontForge。我已经检查了足够的信息以查看FontForge可以导入SVG，但我还没有尝试过）。

当您完成并拥有所需的TTF字体时，您需要将字体转换为许多不同的格式，以便用作Web字体。 我使用这个免费的在线工具：

http://fontface.codeandmore.com/

... 这将为您提供EOT、SVG、TTF和WOFF字体文件，几乎覆盖了所有浏览器。 然后您需要在您的CSS中包含这些文件，如上面链接的文件所示。 注意：对于SVG文件，存在一个您需要更新的ID。 我认为它是由转换工具自动选择的，因此您需要编辑SVG，检查ID并将其包含在内。

例如，在这段代码中：

@font-face {
  font-family: 'MyIcons';
  src: url('myiconfont-iconglyphs.eot');
  src: url('myiconfont-iconglyphs.eot#iefix') format('embedded-opentype'),
       url('myiconfont-iconglyphs.woff') format('woff'),
       url('myiconfont-iconglyphs.ttf')  format('truetype'),
       url('myiconfont-iconglyphs.svg#myiconfont-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

您可能需要在 SVG 定义后更改 #myiconfont-regular 部分。

- Jason O'Neil