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

Question

我肯定已经浏览了 google 的每一页，但还没有找到解决方案。我有一个通过 css font-face 使用的自定义字体。根据我使用的浏览器和操作系统，字体在底部添加了额外的填充。下图是左边是mac，右边是windows的例子。它在右侧(在 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 和 windows 添加不同的 CSS 表。如果有人知道在没有 javascript 添加额外填充的情况下解决这个问题，我将非常感激。

谢谢。

Answer 1

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

normal

Tells user agents to set the used value to a "reasonable" valuebased on the font of the element. The value has the same meaning as. We recommend a used value for 'normal' between 1.0 to 1.2.The computed value is 'normal'.

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

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