用矢量软件（即inkscape）和fontforge创建图标字体？ [英] Creating icon fonts with vector software (i.e. inkscape) and fontforge?
问题描述
一个人物？因为这个方法对我来说太新了，所以我真的很想确定我是否正确地处理它（我看到了巨大的潜力...比创建不同的图标，导出每个不同的颜色和大小的自己的.png文件更好）。如果是这样的话，它会需要一些记忆（尤其是因为我有超过26个图标）。对于那些更有经验的fontforge，有没有办法说一个特定的字=字符？
另外，关于在网站上实现这一点。然后我需要在css class / id（即font = icons;）中指定字体类型。然后我可以改变大小，颜色等与CSS？男人，如果这真的是真的。我希望早些时候发现...小时和小时可以被保存。
无论如何，任何帮助，这是非常赞赏。我即将获得fontforge并开始学习（如果有更好的免费字体创建软件，请告诉我）。希望这可以解决。 我已经成功地为我的网站和Inkscape FontForge方法创建了一些图标字体，如这个方法是非常稳定的，如果你习惯于使用Inkscape这样的软件，那么也很容易。准备（在本例中使用Inkscape）
- >
- 打开包含您设计的Inkscape文档。
- 确保您已将所有形状，类型和行转换为路径，并将大纲模式下的绘图检查为确定。如果存在 问题，则始终可以引用此基本文件对形状进行初始更改。
- 通过选择新建> fontforge_glyph 。
- 将图标粘贴到新文档中。可能最好先将原始设计文档中的所有图标调整大小）。
- 使用对齐工具（如果适用）将图标居中在页面上。
- 将绘图另存为 plain SVG（如果根据要分配的字母标题，比较容易，例如j.svg）。
- 对其他图标重复使用
文件打开，粘贴新的图标，并根据最后的中心和大小。这样，图标集中的大小和位置保持一致（您不必继续选择保存普通SVG的目录）。
使用FontForge创建字形
- 为每个图标创建一个SVG文件，打开FontForge并创建一个新的FontForge文档。
- 在主字形显示列表窗口中，双击其中一个图标的字母/数字。 $ b
- 在这个新的字形窗口中，选择文件>导入，然后选择一个SVG文件（您可能需要在文件对话框中更改文件过滤器以显示SVG文件）。
- 如果导入注册错误，并且线框看起来像遭受了轻微的爆炸，那么您需要返回Inkscape来整理路径。有一个简单的方法来找出在大多数情况下应该可以工作的问题：
- 在Inkscape中，删除图标的填充。
- 添加一个细小的笔画（1px就可以）。
- 将笔画转换为一个路径。
- 生成的图形可能会丢失一部分您的图标。
- 撤消全部，然后将图标分开并重绘/跟踪/更正问题区域。
字体创建（使用FontForge）
- 回到FontForge，一旦你添加了所有的图标，你需要给你的字体一个名字。在主窗口中，选择元素>字体信息。
-
更改以下内容：
- 字体名称：MyFontMedium
- 系列名称 li> 人类名称：我的字体中等
- 权重：书（Win XP认为medium = bold，所以最好使用Book ）在主窗口中，选择文件>生成字体并保存为TrueType（忽略）任何错误）。
b
$ b字体验证/转换
- 转到 www.fontsquirrel.com/fontface/generator 或类似的服务来上传您的TTF文件，并将其转换（并更正） 下载的zip文件将包含有关如何在您的web项目中实现字体的精确说明。
希望是有帮助的p。
- Open the Inkscape document that holds your designs.
- Make sure you've converted all shapes, type and lines to paths and check your drawing in outline mode to be sure. If there are problems, you can always refer back to this base file to make initial changes to the shapes.
- Create a new document by selecting New > fontforge_glyph.
- Paste an icon from your design into the new document.
- Resize the icon to fit the space provided (although it may be best you resize all icons in the original design document first - up to you).
- Centre the icon on the page using the Align tool (if appropriate).
- Save the drawing as a plain SVG (it's easier if you title according to the letter to be assigned eg. "j.svg").
- Repeat for other icons.
- Once you've made an SVG file for each icon, open FontForge and create a new FontForge document.
- In the main glyph display list window, double-click one of the letters/numbers you have an icon for.
- In this new glyph window, choose File > Import and select one of your SVG files (you'll probably need to change the file filter in the file dialogue to show SVG files).
- If the import registers errors and the wireframe looks like its suffered a mild explosion, you'll need to go back to Inkscape to sort out the path. There's an easy way to find out the problem that should work in most cases:
- 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.
- Back in FontForge, once you've added all of your icons, you need to give your typeface a name. In the main window, select Element > Font info.
Change the following:
- Fontname: MyFontMedium
- Family name: My Font
- Name for humans: My Font Medium
- Weight: Book (Win XP thinks medium = bold, so best to use Book)
In the main window, choose File > Generate Fonts and save to TrueType (ignoring any errors).
- Go to www.fontsquirrel.com/fontface/generator or a similar service to upload your TTF file and get it converted (and corrected)
- The zip file you download will contain precise instructions on how to implement the fonts into your web project.
Through getting some answers here and some research, I've come across a new approach to implementing icons. Rather than as images or css background, it seems you can approach icons as a font.
Will this method ultimately mean creating a one file font set that has each icon assigned to a character? Because this method is so new to me I really want to sure I approach it correctly first (I see great potential... so much better than creating different icons, exporting each as it's own .png file for every different color and size).
If that's the case, it'll take a bit of memorization (especially since I have over 26 icons). For those more experienced with fontforge, is there a way to say a specific word = character?
Also, in regards to implementing this on the website. I would then need to specify the font type within the css class/id (i.e. font=icons; ). And then I could change the size, color, etc. with css as well? Man, if this really is true. I wish I found out earlier... hours and hours could have been saved.
Anyway, any help with this is greatly appreciated. I'm about to get fontforge and start learning (if there's better free software for font creation, let me know). Hopefully this works out.
解决方案I've successfully created a few icon fonts for my websites and the Inkscape FontForge approach as outlined in this how-to is pretty solid, and if you're used to using software such as Inkscape, it's also pretty easy too. Here's the steps I take:
Preparation (using Inkscape in this example)
I'll often leave this plain SVG document open, pasting in new icons and centering and sizing according to the last. This way there is size and position consistency across the icon set (and you don't have to keep choosing the directory to save your plain SVGs).
Glyph creation (using FontForge)
Font creation (using FontForge)
Font validation/conversion
Hope that's of help.
这篇关于用矢量软件（即inkscape）和fontforge创建图标字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
