@font-face问题，Firefox添加了填充，Chrome没有
当通过 @font-face 使用自定义字体时，它确实会像我认为在 Chrome 中那样呈现。但在 Firefox 中，字体中添加了额外的填充（顶部和底部）。
我能做些什么吗？
When using a custom font via @font-face, it does render just as I think it should in Chrome. In Firefox, though, additional padding (top and bottom) is added to the font.
Here is my example page that outlines the problem.
Is there anything I can do about it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
仅供参考，这种情况也发生在 Linux 上的 Firefox 中（而不是 Chromium 中）。我尝试在 FontForge 中加载您的字体，并立即收到警告：
我认为问题在于 VDMX（垂直设备指标） 表存在缺陷：
这看起来与 Firefox 中发生的情况一模一样：某个地方的最小和最大高度计算不正确。当您选择文本时，这一点也很明显：选择框延伸到该行的最顶部和底部；如果
h1元素确实有填充，您会看到该行的顶部和底部与选择框之间存在间隙。此外，验证显示几乎每个字形都是“极值处缺失点”：
快速搜索显示：
FYI, this also happens in Firefox on Linux (and not in Chromium). I tried to load your font in FontForge and immediately got a warning:
I think the problem is that the VDMX (Vertical Device Metrics) table is defect:
This looks exactly like what happens in Firefox: somewhere the minimum and maximum height is incorrectly calculated. This is also clear when you select the text: the selection box extends to the utmost top and bottom of the line; if the
h1element really had padding, you would see a gap between the top and bottom of the line and the selection box.Also, validation revealed that almost every glyph is “missing points at extrema”:
A quick search showed:
只需添加：
到你的 CSS 规则中
Just Add:
to your CSS rules