创建图标字体与矢量化软件（如Inkscape中）和fontforge？(Creating icon

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

请问这种方法最终意味着创建具有分配给每个字符图标一个文件字体集？由于这种方法是如此新的给我，我真的想确保我的做法是正确的第一个（我看到了巨大的潜力......比创建不同的图标，每一个出口，因为它的每一个不同的颜色和大小自己.png文件好多了）。

如果是这样的话，它会采取一些记忆的（尤其是因为我有超过26个图标）。对于那些更有经验与fontforge，有没有办法可以断定一个特定的词=性格？

此外，关于在网站上实现这一点。然后我需要指定的CSS类/ ID中的字体类型（即字体=图标）。然后，我可能改变大小，颜色等与CSS呢？男人，如果这确实是真的。我想我发现了前面......几个小时，是否可以得到挽救。

无论如何，任何帮助，这是极大的赞赏。我即将得到fontforge，并开始学习（如果有对字体创建更好的免费软件，让我知道）。希望这个作品出来。

Answer 1:

我已经成功地创建了几个图标，字体为我的网站和在列出的Inkscape中FontForge方法这如何做是非常稳固的，如果你习惯使用软件，如Inkscape，这也是很容易的事。下面是我采取的步骤：

制备（在本例中使用Inkscape中）

打开包含您的设计中，Inkscape的文档。
请确保您已转换所有的形状，类型和线路路径和检查大纲模式绘图以确保万无一失。如果有问题，你总是可以重提这个基本文件做出的初始形状的变化。
创建通过选择New> fontforge_glyph一个新的文档。
从设计一个图标粘贴到新文档。
调整大小以适合提供的空间（尽管它可能是最好的，你调整原来的设计文件先在所有图标 - 由你）的图标。
使用中心对齐工具（如适用）页面上的图标。
绘图保存为纯 SVG（这是更容易，如果根据信你的标题被分配例如“j.svg”）。
重复其它图标。

我会经常离开这个普通SVG文件打开，新的图标和居中粘贴和大小根据最后。 这种方式有跨越图标集的大小和位置的一致性（和你没有保持选择的目录，以节省您的平原SVGs）。

雕文创作（使用FontForge）

一旦您完成了每个图标，打开FontForge SVG文件并创建一个新文档FontForge。
在主字形显示列表窗口，双击你有一个图标字母/数字之一。
在这个新的符号窗口中，选择文件>导入 ，并选择您的SVG文件中的一个（你可能需要更改文件过滤器在文件对话框显示SVG文件）。
如果导入登记错误和线框看起来像它遭受了轻微的爆炸，你需要回到Inkscape中理清路径。这里有一个简单的方法来发现，在大多数情况下正常运行的问题：
- 在Inkscape中，删除图标的填充。
- 添加薄行程（1px的都行）。
- 行程转换为路径。
- 生成的形状可能会丢失你的图标的一部分。
- 撤消所有，然后打破图标分开，重绘/跟踪/正确的问题区域。

字体创建（使用FontForge）

早在FontForge，一旦你添加了所有的图标，你需要给你的字体的名称。在主窗口中，选择元素>字体信息 。
更改以下：
- FONTNAME：MyFontMedium
- 姓：我的字体
- 人类名称 ：My字体中
- 重量：书（Win XP的认为媒介=大胆，所以最好用书）
在主窗口中，选择文件>生成字体并保存到TrueType字体（忽略任何错误）。

字体验证/转换

转到www.fontsquirrel.com/fontface/generator或类似的服务上传您的TTF文件，并把它转化（和纠正）
你下载的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应用程序来与该字体。如果我需要做我自己的图标字体在将来，我可能会使用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定义后位。

文章来源: Creating icon fonts with vector software (i.e. inkscape) and fontforge?