我一直以web designer depot 和intridea 的文章为起点，制作自己的网络字体。
我知道不同的引擎以不同的方式呈现字体，但我遇到的问题是 firefox 呈现的字体高于 chrome - 在我显示字体的大小下，这非常明显（3 或 4 px - 在按钮上意味着它们完全错位了）。
我还引用了Github's octicon documentation - 在查看 occticons 如何比较浏览器时，它们看起来很棒！据我所知，没有明显的区别。 他们是如何做到这一点的？
我正在使用 inkscape 并尝试了几个不同的 svg 入门模板。设置是Set width: 1024 并尝试了各种大小的图标，没有不同的结果。即 512pt 正方形并在基线下方对齐。
我的问题是，在创建网络字体时，我需要遵守哪些规则才能使浏览器呈现字体的差异最小？
【问题讨论】：
标签： svg cross-browser font-face inkscape octicons
这是一个复杂的问题，涉及到一个叫做垂直指标的东西。字体具有三组这些。在“hhea”表中找到的第一组通常特定于 Mac。在“OS/2”表中找到的另外两组与 Windows（和 Linux）有关。我们的想法是使这些值相等。我们的生成器有一个奇怪的特性，叫做“Fix Vertical Metrics”，它可以很好地猜测这些。请注意，Github 使用生成器来完成他们的图标。
我知道这与 SVG 字体无关，但我很确定这就是您的问题所在。具有不同的垂直指标值会破坏跨平台的基线。
一些阅读：
【讨论】：
【讨论】：
我有同样的问题，并通过手动设置所有三种类型的指标来解决它。
您可以在此处查看我的工作解决方案以及设置的屏幕截图：https://stackoverflow.com/a/20609766/955413
【讨论】：
我使用 Icomoon App 来创建 Emoji icon font 以及为每个项目创建自定义图标字体。
Icomoon 应用程序允许您执行以下各项操作：
更多详情，请参阅Create webfont with Unicode Supplementary Multilingual Plane symbols。
【讨论】：