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

Question

我必须经历谷歌的每一页但尚未找到解决方案.我有一个自定义字体,我通过css font-face使用.该字体在底部添加了额外的填充,具体取决于我使用的浏览器和操作系统.下图显示了一个示例,其中mac位于左侧,窗口位于右侧.它在右边看起来是正确的(在windows中),我希望它在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

普通的

告诉用户代理根据元素的字体将使用的值设置为“合理”值。该值与 含义相同。我们建议使用 1.0 到 1.2 之间的“正常”值。计算值是“正常”。

我认为您观察到的行为来自浏览器中不同的“合理”值，就像normal默认line-height值一样。

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