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

EN

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

准备(本例中使用Inkscape )

1. 打开包含您的设计的Inkscape文档。
2. 确保您已将所有形状、文字和线条转换为路径，并在轮廓模式下检查您的绘图。如果有问题，您始终可以重新引用此基本文件来对形状进行初始更改。要将图标从设计中对齐到新的document.
3. Resize中(尽管最好是先调整原始设计文档中的所有图标的大小，由您决定)，
4. 可以通过以下方法创建一个新文档：新建>将设计中的图标放入新的SVG中。
5. 使用对齐工具将图标放在页面的中间(如果将绘图作为普通的SVG对齐(它是如果你根据要分配的字母来命名，就会更容易。其他图标的"j.svg").
6. Repeat。

我经常会让这个普通的SVG文档保持打开状态，粘贴新的图标，并根据最后一个图标居中和调整大小。这样，整个图标集的大小和位置都是一致的(而且您不必一直选择保存普通SVG的目录)。

字形创建(使用FontForge)

1. 为每个图标创建SVG文件后，打开FontForge并创建新的FontForge文档。
2. 在标志符号显示列表主窗口中，双击图标所在的字母/数字之一。
3. 在这个新的标志符号窗口中，选择文件>导入并选择其中一个SVG文件(您可能需要在文件对话框中更改文件筛选器以显示SVG文件)。
4. 如果导入记录错误，线框看起来像是轻微爆炸，您需要返回到Inkscape来整理路径。有一个简单的方法来找出问题，应该工作在大多数cases:

• In墨水，删除填充的图标。*添加一个细笔划(1px就可以了)。*将笔划转换为路径。*生成的形状可能会缺少图标的一部分。*全部撤消，然后拆分图标并重新绘制/跟踪/更正问题区域。

字体创建(使用FontForge)

1. 回到FontForge，一旦你添加了所有的图标，你需要给你的字体起一个名字。在主窗口中，选择Element > Font Book)
   1. In following:
   • Fontname：MyFontMedium * Family name：My Font * Name Book)
   1. In choose ：My Font Medium * Weight：Book (Win XP认为中等粗体，因此最好在主窗口中使用Book> Generate Fonts save to TrueType (忽略任何错误)。H261G262

字体验证/转换

请转到www.fontsquirrel.com/fontface/generator或类似的服务来上传您的TTF文件并对其进行转换(下载的

1. 文件将包含有关如何在您的web项目中实现字体的精确说明。

希望这能帮上忙。

下面是你想要做的一个开源的例子：

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

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