svg - 创建跨浏览器图标webfont

Question

我一直以web designer depot和intridea中的文章为起点来制作自己的webfont。

我知道不同的引擎呈现字体的方式不同，但是我遇到的问题是firefox呈现的字体比chrome高-在我显示字体的大小上，这非常引人注目（3或4 px-在按钮上表示它们是完全错位）。

我还引用了Github's octicon documentation-在查看octicon如何与浏览器进行比较时，它们看起来很棒！据我所知，没有明显的区别。他们是如何实现这一目标的？

我正在使用inkscape，并尝试了几个不同的svg入门模板。安装程序为Set width: 1024，并尝试了各种大小的图标，但没有不同的结果。即512pt正方形并在基线正下方对齐。

我的问题是，创建网络字体时，我需要隐含哪些规则，以使浏览器呈现字体之间的差异最小？

Answer 1

这是一个涉及垂直指标的复杂问题。字体有三套。在“ hhea”表中找到的第一组通常特定于Mac。在“ OS / 2”表中找到的其他两组与Windows（和Linux）有关。想法是使这些值相等。我们的生成器具有一个称为“固定垂直指标”的功能，该功能可以对此做出最佳猜测。请注意，Github使用Generator来完成其图标。

我知道这与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