Firefox 字体垂直错位？

Question

所以我在我的设计中使用了这个名为 Gagalin（常规）的网络字体，它在 Chrome 和 Edge 中运行良好。然而，当我在 FireFox 中查看它时，我发现了一个非常奇怪的垂直错位（下图）。此外，我使用的 @font-face 规则以前一直有效（也在 FireFox 中），只是不适用于此字体，因为我使用的其他网络字体已正确对齐。关于如何解决这个问题的任何想法？我假设它与字体有关？

编辑也许这不是最好的询问地点，但我真的不知道还能去哪里

代码

我设置了 magin、padding 和 line-height 重置 + 我将 normalize.min.css 包含在 h1 边距中，我将其明确重置为 0 以覆盖标准化边距。 header h1 的 line-height 也再次设置为 1。

Dropbox link to the font files

@font-face {
    font-family:'Gagalin';
    src:url(../fonts/gagalin/Gagalin-Regular.eot);
    src:url(../fonts/gagalin/Gagalin-Regular.eot?#iefix) format('embedded-opentype'),
        url(../fonts/gagalin/Gagalin-Regular.svg#Gagalin-Regular) format('svg'),
        url(../fonts/gagalin/Gagalin-Regular.woff2) format('woff2'),
        url(../fonts/gagalin/Gagalin-Regular.woff) format('woff'),
        url(../fonts/gagalin/Gagalin-Regular.otf) format('opentype');
    font-weight:400;
    font-style:normal
}

* {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;

    font-weight: normal;
    font-size: 3vm;
    font-size: 3vmin;
    line-height: 1.5;
}

h1 {
    font-family: 'Gagalin';
    margin: 0;
}

header h1 {
    line-height: 1;
}

更新已尝试删除所有字体，但 woff 字体和问题仍然存在

@font-face {
    font-family:'Gagalin';
    src:url(../fonts/gagalin/Gagalin-Regular.woff2) format('woff2'),
        url(../fonts/gagalin/Gagalin-Regular.woff) format('woff');
    font-weight:400;
    font-style:normal
}

图像

Answer 1

看起来像是一个不同的默认行高。明确设置行高可以解决这个问题。我们是否有机会看到您的代码来验证这一点？

边距和填充也是如此。我看到一个明确的零边距，但我没有看到零的明确填充。

请注意，Stack Overflow 的规则要求您发送一些代码，因此我们可以test/reproduce 解决问题。

Answer 2

尝试删除所有字体，或删除除 woff 或 woff2 之外的所有字体，看看是否是字体 inconsistency/baseline 问题。

Answer 3

适合那些想知道我能够通过在 Birdfont 中打开字体、导出并重新转换来解决此问题的人。我真的不知道为什么 Firefox 把它搞砸了，而其他浏览器对它没有怨恨，但它现在正在工作。

感谢您的时间和回答

Firefox 字体垂直错位？

Firefox font vertical misalignment?

css

firefox

google-chrome

font-face