@font-face 问题，Firefox 增加了 padding，Chrome 没有答案

【问题标题】：@font-face problem, Firefox adds padding, Chrome does not@font-face 问题，Firefox 增加了 padding，Chrome 没有
【发布时间】：2011-03-24 22:31:57
【问题描述】：

当通过@font-face 使用自定义字体时，它的呈现方式与我认为在 Chrome 中应该呈现的一样。但在 Firefox 中，额外的填充（顶部和底部）被添加到字体中。

Here is my example page that outlines the problem.

我能做些什么吗？

【问题讨论】：

死链接，如果有图片来说明会很有帮助。

标签： firefox fonts css font-face

【解决方案1】：

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

字体中的以下表格已被 FontForge 忽略
Ignoring 'LTSH' 线性阈值表<br>Ignoring 'VDMX' 垂直设备指标表
忽略“hdmx”水平设备指标表

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

为了避免网格拟合整个字体确定正确高度，VDMX 表已已定义。

这看起来与 Firefox 中发生的完全一样：某个地方的最小和最大高度计算不正确。这一点在选择文本的时候也很清楚：选择框一直延伸到行的最顶端和最底端；如果h1 元素确实有填充，您会看到该行的顶部和底部与选择框之间存在间隙。

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

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

一个快速的search 显示：

我遇到的唯一另一个问题是相当讨厌的情况称为“失踪 Points at Extrema”。用字体，需要有一个点（或节点，如它们在 Inkscape 中被调用）在最左、最右、最上和最下一个字形。通常他们在那里无论如何只是因为你的方式字形已构建，但对角线圆头通常会引起问题 [source, including picture (scroll down)]

【讨论】：

感谢您提供非常好的答案！我也在使用 GNU/Linux。我不知道它在其他系统中的外观。但是，如何将这条缺失的信息添加到字体中？正如 Chrome 实际上猜对的那样，字体中应该有足够的信息，使其很容易定义。但是怎么做呢？
@Johan – 我不确定。如果字体的 EULA 允许，您可以尝试自己使用 FontForge 编辑字体，看看是否有帮助。虽然我不是 FontForge 专家，但我的回答只是一个有根据的猜测。
不管怎样，你的回答太好了，不能接受。我尝试将其加载并保存在 fontforge 中，然后它在 FF 和 Chrome 中看起来相同。两者都像FF一样从一开始就渲染它。 fontforge 中有大量的参数。我会和他们玩一会儿，然后我会放弃。 :)
@Johan – 祝你好运。成功后请告诉我（通过在此处发表评论）。

【解决方案2】：

只需添加：

line-height:1;

你的 CSS 规则

【讨论】：

虽然这似乎与答案无关，但它是一个有效的陈述：Firefox 可以呈现低于 1 的行高，而 Chrome 不能，这可能导致（也具有继承的行高）类似的情况。