33

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

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

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

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

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

4

2 回答 2

68

我已经成功地为我的网站创建了一些图标字体，并且本指南中概述的 Inkscape FontForge 方法非常可靠，如果您习惯使用 Inkscape 等软件，它也很容易。这是我采取的步骤：

准备（在本例中使用 Inkscape）

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

我经常会打开这个纯 SVG 文档，粘贴新图标并根据最后一个图标居中和调整大小。这样，整个图标集的大小和位置就保持一致（并且您不必一直选择目录来保存纯 SVG）。

字形创建（使用 FontForge）

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

字体创建（使用 FontForge）

  1. 回到 FontForge，一旦你添加了所有的图标，你需要给你的字体一个名字。在主窗口中，选择Element > Font info。
  2. 更改以下内容：
  • 字体名称： MyFontMedium *姓氏：我的字体 *人类名称：我的字体中等 *重量：书（Win XP 认为中等 = 粗体，所以最好使用书）
  1. 在主窗口中，选择文件 > 生成字体并保存为 TrueType（忽略任何错误）。

字体验证/转换

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

希望这会有所帮助。

于 2012-11-29T21:45:42.987 回答
8

这是您要执行的操作的开源示例：

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 字体后，您需要将字体转换为用作网络字体所需的多种不同格式。我使用这个免费的在线工具：

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;
}

#myiconfont-regular您可能必须在 svg 定义之后更改该位。

于 2012-10-11T02:48:13.040 回答