使用矢量软件（即inkscape）和fontforge创建图标字体？

Question

通过在这里得到一些答案和一些研究，我遇到了一种实现图标的新方法。而不是像图像或CSS背景，似乎你可以将图标作为一种字体。

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

如果是这样的话，那就需要一点记忆（特别是因为我有超过26个图标）。对于那些对fontforge更有经验的人来说，有没有办法说出一个特定的单词=字符？

另外，关于在网站上实现这一点。然后我需要在css类/ id中指定字体类型（即font = icons;）。然后我也可以用css改变大小，颜色等等？男人，如果这是真的。我希望我早些时候发现......小时和小时本可以保存。

无论如何，非常感谢任何帮助。我即将获得fontforge并开始学习（如果有更好的免费软件用于字体创建，请告诉我）。希望这会成功。

Answer 1

我已成功为我的网站创建了一些图标字体，并且this how-to中概述的Inkscape FontForge方法非常可靠，如果您习惯使用Inkscape等软件，那么它也很容易。以下是 I 采取的步骤：

准备（在此示例中使用Inkscape）

1. 打开包含您设计的Inkscape文档。
2. 确保您已将所有形状，类型和线条转换为路径，并确保在大纲模式下检查绘图。如果出现问题，您可以随时返回此基本文件以对形状进行初始更改。
3. 选择新建＆gt;创建新文档fontforge_glyph 即可。
4. 将设计中的图标粘贴到新文档中。
5. 调整图标大小以适合所提供的空间（尽管最好先调整原始设计文档中的所有图标 - 直至您）。
6. 使用“对齐”工具（如果适用）使页面上的图标居中。
7. 将图形保存为 plain SVG（如果您根据要分配的字母进行标题，则会更容易。“j.svg”）。
8. 重复其他图标。

我会经常将这个普通的SVG文档保持打开状态，粘贴新图标，并按照最后一个中心和大小调整。这样，图标集的大小和位置一致性（您不必继续选择保存普通SVG的目录）。

---

字形创建（使用FontForge）

1. 为每个图标创建一个SVG文件后，打开FontForge并创建一个新的FontForge文档。
2. 在主字形显示列表窗口中，双击您有图标的字母/数字之一。
3. 在此新字形窗口中，选择文件＆gt;导入并选择一个SVG文件（您可能需要更改文件对话框中的文件过滤器以显示SVG文件）。
4. 如果导入注册错误并且线框看起来像是一个轻微的爆炸，你需要回到Inkscape来整理路径。有一种简单的方法可以找出在大多数情况下应该有效的问题：
   • 在Inkscape中，删除图标的填充。
   • 添加一个细笔画（1px即可）。
   • 将笔划转换为路径。
   • 结果形状可能会遗漏您图标的一部分。
   • 撤消全部，然后分开图标并重绘/跟踪/更正问题区域。

---

字体创建（使用FontForge）

1. 回到FontForge，一旦你添加了所有的图标，你需要给你的字体命名。在主窗口中，选择元素＆gt;字体信息。

2. 更改以下内容：

   • 字体名称：MyFontMedium
   • 姓氏：我的字体
   • 人名？：我的字体中等
   • 重量：预订（Win XP认为中等=粗体，所以最好用书）

3. 在主窗口中，选择文件＆gt;生成字体并保存为TrueType（忽略任何错误）。

---

字体验证/转换

1. 转到www.fontsquirrel.com/fontface/generator或类似的服务上传您的TTF文件并将其转换（并更正）
2. 您下载的zip文件将包含有关如何在您的网络项目中实现字体的精确说明。

希望有帮助。

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 App来提供字体。如果我将来需要自己制作图标字体我可能会使用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位。