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

Question

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

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

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

此外,关于在网站上实现这一点.然后我需要在css类/ id中指定字体类型(即font = icons;).然后我也可以用css改变大小,颜色等等？男人,如果这是真的.我希望我早点发现......可以节省数小时.

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

Answer 1

我已经为我的网站成功创建了一些图标字体,并且如本方法中所述的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. 在这个新的字形窗口中,选择File> Import并选择一个SVG文件(您可能需要更改文件对话框中的文件过滤器以显示SVG文件).
4. 如果导入注册错误并且线框看起来像是一个轻微的爆炸,你需要回到Inkscape来解决路径.有一种简单的方法可以找出在大多数情况下应该有效的问题:
   • 在Inkscape中,删除图标的填充.
   • 添加一个细笔画(1px会做).
   • 将笔划转换为路径.
   • 生成的形状可能会丢失图标的一部分.
   • 撤消全部,然后分开图标并重绘/跟踪/更正问题区域.

字体创建(使用FontForge)

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

2. 更改以下内容:

   • 字体名称:MyFontMedium
   • 姓氏:我的字体
   • 人类名称:我的字体中等
   • 重量:书(Win XP认为中等=粗体,所以最好用书)

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

字体验证/转换

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

希望有所帮助.

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

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