为什么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; }"修复"Firefox上的问题(也就是说,因此FF和Chrome将使用Helvetica Neue作为渲染字体).