fonts - 使用矢量软件(即 inkscape)和 fontforge 创建图标字体？

Question

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

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

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

此外，关于在网站上实现这一点。然后我需要在 css class/id 中指定字体类型(即 font=icons; )。然后我也可以用css改变大小、颜色等？伙计，如果这是真的的话。我希望我早点发现...本来可以节省很多时间。

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

Answer 1

我已经成功为我的网站创建了一些图标字体，并使用了 Inkscape FontForge 方法，如 this how-to 中所述。非常可靠，如果您习惯使用 Inkscape 等软件，它也非常简单。以下是我采取的步骤:

准备(在本例中使用 Inkscape)

1. 打开保存您的设计的 Inkscape 文档。
2. 确保您已将所有形状、文字和线条转换为路径，并在轮廓模式下检查您的绘图以确保确定。如果存在问题，您可以随时引用此基础文件对形状进行初步更改。
3. 选择新建 > fontforge_glyph 创建新文档。
4. 将设计中的图标粘贴到新文档中。
5. 调整图标大小以适应所提供的空间(不过最好先调整原始设计文档中所有图标的大小 - 由您决定)。
6. 使用对齐工具(如果适用)将图标在页面上居中。
7. 将绘图另存为普通 SVG(如果您根据要指定的字母命名标题，例如“j.svg”，会更容易)。
8. 对其他图标重复上述操作。

我经常让这个普通的 SVG 文档保持打开状态，粘贴新图标并根据上一个图标进行居中和调整大小。这样，整个图标集的大小和位置就保持一致(并且您不必不断选择目录来保存纯 SVG)。

<小时/>

字形创建(使用 FontForge)

为每个图标创建 SVG 文件后，打开 FontForge 并创建一个新的 FontForge 文档。

在主字形显示列表窗口中，双击有图标的字母/数字之一。

在这个新的字形窗口中，选择文件 > 导入，然后选择您的一个 SVG 文件(您可能需要更改文件对话框中的文件过滤器才能显示 SVG 文件)。<

如果导入注册错误并且线框看起来像是遭受了轻微爆炸，则您需要返回 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)

回到 FontForge，添加所有图标后，您需要为字体命名。在主窗口中，选择元素 > 字体信息。

更改以下内容:

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

在主窗口中，选择文件 > 生成字体并保存为 TrueType(忽略任何错误)。

<小时/>

字体验证/转换

转到www.fontsquirrel.com/tools/webfont-generator或类似的服务来上传您的 TTF 文件并对其进行转换(和更正)

您下载的 zip 文件将包含有关如何将字体应用到您的网络项目中的精确说明。

希望对您有所帮助。