使用 Helvetica 时，Firefox 和 Chrome 上的 <button> 内的文本垂直对齐

Question

我正在尝试设置元素的样式，但在使用 Helvetica 字体时，它在 Firefox 和 Chrome 中的显示不一致。不过，Arial 和 Lucida 产生了相同的结果。

在 Firefox（左）中，文本垂直居中，根据一个包含下降线的文本框。在 Chrome 中（右），居中是围绕文本顶部到其基线。

button {
    border: 1px solid black;
    font: 18px Helvetica;
    padding: 10px;
    background: #ddd;
}

小提琴：http://jsfiddle.net/3wmhpb8g/7/

这是在 Mac/Yosemite 上的 Firefox 31 和 Chrome 38 上。

如何使视图保持一致？

Answer 1

这与 <button> 元素没有任何关系，这是一个与 Firefox 和 Chromium 处理嵌入在字体文件中的字体度量方式不同的一般问题。

您已经确定了最简单的解决方案，即使用 Arial 而不是 Helvetica。或者，如果您指定一个实际的字体（使用@font-face），那么您可以控制浏览器使用的实际字体（不仅仅是字体名称），然后您可以指定一个您知道一致呈现的网络字体跨浏览器。

或者（这将是一个 hack，但这取决于您）您可以使用 CSS 规则来定位 Firefox，并根据浏览器使用不同的填充，然后您仍然可以使用 font-family: Helvetica。但是，彻底测试。因为有太多的 Helvetica 和 Helvetica Neue 的许可/未许可/模拟版本，只需指定 font-family: Helvetica 就可以让每个人的 Mac/Linux/Windows/Android/iOS 设备安装任何 Helvetica 字体，这很可能做个废话。

我不是哪个浏览器“正确”的仲裁者，但基于this discussion 似乎是 Firefox，他们已经实现了完整的字体指标，而 Chromium 忽略了它们。这是related question。

同样，字体度量是字体本身的一个特征，因此如果您使用@font-face 指定 .otf 或 .ttf 字体，您可以控制它。请参阅this thread，您可以编辑字体并更改字体文件的“真正使用错字度量”标志。这是“正确”的解决方案，但它仅在您想提供自己的字体文件时才有效。如果没有，只需指定一种跨浏览器呈现相同的字体。