css @ font-face不会在所有浏览器中垂直对齐文本

Question

我一定经历过谷歌的每一页但尚未找到解决方案。我有一个自定义字体，我通过css font-face使用。该字体在底部添加了额外的填充，具体取决于我使用的浏览器和操作系统。下图显示了一个示例，其中mac位于左侧，窗口位于右侧。它在右边看起来是正确的（在窗口中），我希望它在mac上是相同的。

@font-face
{
  font-family: universLight;
  src: url('http://www.viggi.com/fonts/UniversLTStd-Light.otf');
  font-weight: normal;
  font-style: normal;
}
#button{
    font-family: universLight;
    border: 1px solid black;
    background: #ccc;
}

代码位于http://jsfiddle.net/ZDh5h/

以下是我已经知道的研究不会起作用。

• line-height在顶部和底部添加填充，以便底部的额外填充保持不变。
• 使用不同的扩展名（例如.otf或.ttf）也不起作用。只是产生相同的结果
• 更改字体大小也没有真正做任何事情

我在网站上经常使用这种字体，并且不想为mac vs windows添加不同的CSS表格。如果有人知道无论如何修复这个没有javascript添加额外的填充我将非常感激。

谢谢。

Answer 1

请参阅http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

  

<强>正常

     

告诉用户代理将使用的值设置为＆＃34;合理的＆＃34;值   基于元素的字体。该值具有相同的含义   。我们建议使用正常的＆＃39;正常值。介于1.0到1.2之间。   计算出的值是正常的＆＃39;

我认为你观察到的行为来自不同的......合理的＆＃34;浏览器中的值normal是默认的line-height值。

因此请指定您的值（比如说line-height: 1.5em;）以消除差异。