使用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/

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

如何使视图保持一致？

Answer 1

这与元素没有任何关系<button>，这是一个与 Firefox 和 Chromium 如何处理嵌入在字体文件中的字体规格之间的差异相关的一般问题。

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

或者（这可能是一个 hack，但这取决于你）你可以使用 CSS 规则来定位 Firefox 并根据浏览器使用不同的填充，然后你仍然可以使用font-family: Helvetica. 但是，要彻底测试。因为 Helvetica 和 Helvetica Neue 有很多授权/未授权/模拟版本，简单地指定font-family: Helvetica就可以由每个人的 Mac/Linux/Windows/Android/iOS 设备安装的 Helvetica 字体决定，这可能是一个冒险。

我不是哪个浏览器是“正确”的仲裁者，但根据这个讨论，它似乎是 Firefox，他们已经实现了完整的字体指标，而 Chromium 忽略了它们。这是一个相关的问题。

同样，字体规格是字体本身的一个功能，因此如果您使用 指定 .otf 或 .ttf 字体@font-face，您就可以对此进行控制。看到这个线程，您可以编辑字体并更改字体文件的“真正使用拼写错误指标”标志。这是“正确”的解决方案，但仅当您想提供自己的字体文件时才有效。如果没有，只需指定一种在浏览器中呈现相同的字体即可。