@ font-face问题，Firefox添加填充，Chrome没有

Question

通过@font-face使用自定义字体时，它会像我认为的那样在Chrome中呈现。但是，在Firefox中，字体会添加额外的填充（顶部和底部）。

Here is my example page that outlines the problem

我能做些什么吗？

Answer 1

仅供参考，这也发生在Linux上的Firefox中（而不是Chromium中）。我试图在FontForge中加载您的字体并立即收到警告：

  

FontForge
已忽略字体中的下表   忽略'LTSH'线性阈值表
  忽略'VDMX'垂直设备指标表
  忽略'hdmx'水平设备指标表

我认为问题是VDMX (Vertical Device Metrics)表存在缺陷：

  

为了避免网格适应   整个字体确定正确   高度，VDMX表已经   定义

这看起来与Firefox中发生的情况完全相同：某处错误地计算了最小和最大高度。选择文本时也很清楚：选择框延伸到行的最顶部和底部;如果h1元素确实有填充，您会看到该行的顶部和底部与选择框之间存在间隙。

此外，验证显示几乎每个字形都是“missing points at extrema”：

  

PostScript和TrueType都会   喜欢你在最大值处得分   和极小（极值）的路径。

快速search显示：

  

我唯一的另一个问题是   相当恶劣的条件称为“失踪   点在Extrema“。用字体，   需要有一个点（或节点，如   他们在Inkscape中被称为   最左边，右边，顶部和底部   一个字形。通常他们在那里   无论如何只是因为你的方式   字形是建立的，但对角线   圆形末端经常会引起问题   [source, including picture (scroll down)]

Answer 2

只需添加：

line-height:1;

到您的CSS规则