为什么Firefox渲染没有“顶部”间距的无衬线文本？

Question

我有一个简单的<a class="button">元素，我注意到在Firefox上，文字不像Chrome上那样垂直对齐。

这是我的CSS：

body {
  font-family: sans-serif;
  font-size: 36px;

  padding: 1em;

  color: #333;
  background-color: #f6f6f6;
}

.button {
  font-size: 2em;

  display: inline-block;

  margin: 10px 0;
  padding: 0.6em 1em;

  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

  color: #333333;
  background-color: #a3e7fc;
}
.button:hover {
  background-color: #a5eaff;
}
.button:active {
  background-color: #9bdcef;
}

非常基本。这是一个codepen，您可以在浏览器中查看它：http://codepen.io/romellem/pen/GoazbW

现在我不确定，这就是为什么Firefox正在如此糟糕地渲染文本。也就是说，它在文本下面放了很多空间，但不高于它。

以下是一些截图：

火狐：

铬：

在四处寻找，我无法找到关于这个主题的很多阅读材料。

任何人都有任何想法为什么Firefox在底部呈现带空格的文本，但不在顶部？感谢。

注意：我正在运行Mac OS X Yosemite（10.10.5）。

Answer 1

想出来。放font-family: sans-serif;时，Chrome会选择 Helvetica Neue ，而Firefox会选择简单的 Helvetica 。空间的差异在于字体文件本身。

明确声明body { font-family: "Helvetica Neue",Helvetica,sans-serif; }代替＆＃34;修正＆＃34;关于Firefox的问题（也就是说，因此FF和Chrome将使用Helvetica Neue作为渲染字体）。