创建跨浏览器图标Web字体

Question

我一直在制作自己的网络字体，以Web Designer Depot和Intridea上的文章为起点。

我知道不同的浏览器对字体的渲染方法不同，但我遇到的问题是Firefox比Chrome高地渲染字体 - 对于我展示字体的大小来说这非常明显（3或4像素 - 在按钮上意味着它们完全不对齐）。

我还参考了Github的octicon文档 - 当我检查octicons在不同浏览器中的表现时，它们看起来很棒！ 就我所见，没有明显的区别。 他们是如何做到这一点的？

我正在使用Inkscape，并尝试了几个不同的SVG模板。设置为设置宽度：1024，并尝试了各种大小的图标，但结果都没有变化。即512pt正方形并且对齐在基线下面。

我的问题是，在创建Web字体时需要实施哪些规则，以获得最小的浏览器字体渲染差异？

- user623520

Answer 1

这是一个涉及垂直度量的复杂问题。字体有三组垂直度量。第一组在'hhea'表中找到，通常特定于Mac。另外两组在'OS/2'表中找到，与Windows（和Linux）相关。想法是使这些值相等。我们的生成器有一个名为“修复垂直度量”的功能，可以尽可能地猜测这些值。请注意，Github使用生成器完成其图标。我知道这与SVG字体无关，但我非常确定这是您的问题所在。具有不同垂直度量值会破坏跨平台的基线。一些阅读资料：

• http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
• http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
• http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations

- Font Squirrel

---

谢谢回复 : ) 毫无疑问，您是正确的，垂直度量是不一致性的原因。在使用inkscape创建原始SVG时，是否有任何步骤可以采取来设置/优化垂直度量？我看不到任何ascender / descender / line gap / baseline等设置/值。我已经通过您的修复垂直度量工具运行了字体，但是在浏览器之间（webkit和gecko）甚至在相同的操作系统（linux）中对齐方式都偏离太远。我只能假设我在inkscape中设置了错误的画布（即使我尝试了各种起始webfont SVG）？ - user623520

我们没有使用 Inkscape 创建字体的经验，但我很想看看您创建的 TTF 文件以检查其内部结构。请随时将文件发送至我们的电子邮件地址：[e-mail]。 - Font Squirrel

Answer 2

有一个名为icomoon的Web应用程序：http://icomoon.io/app/

它的表现相当不错，但您需要测试不同图标的渲染效果。

如果您不想设计所有内容，它提供了许多图标。

- fabien

---

到目前为止，我使用icomoon没有遇到任何问题。但我没有在Windows机器上测试过它。在Mac OSX上，Safari、Firefox和Chrome都可以正常工作。在所有已测试的iOS设备上以及Android上的Chrome和Firefox也可以正常工作。 - MrUpsidown

icomoon.io的链接在2015年5月已经失效。 - Milche Patern

Answer 3

我使用了 Icomoon App 来创建 表情图标字体 ，并且还使用它来按项目基础创建自定义图标字体。

Icomoon App 可以帮助你完成以下每一项：

• 从多种流行的图标字体中获取一个或多个图标
• 上传其他字体，可以是图标字体也可以是普通字体
• 上传 SVG 文件以用作图标
• 从任何可用字体中组合任意数量的图标
• 设置所需字符的 UNICODE 十六进制值
• 导出和/或保存所创建的字体集

更多详情请参见使用Unicode补充多语言平面符号创建Web字体。

- John Slegers

Answer 4

我曾经遇到同样的问题，并通过手动设置所有三种类型的度量解决了它。

您可以在此处查看我的工作解决方案，其中包括设置的屏幕截图：https://stackoverflow.com/a/20609766/955413

- Karlis Rode