我必须搜索了谷歌的每一页，但还是没有找到解决方案。我有一个使用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/
以下是我已经了解到无法解决的问题：
- 行高会在顶部和底部添加填充，因此底部的额外填充仍然存在。
- 使用不同的扩展名（如.otf或.ttf）也无效。只会产生相同的结果
- 更改字体大小也没有真正起作用
我在整个网站中经常使用这种字体，而且不想为mac和windows添加不同的CSS样式表。如果有人知道如何在没有JavaScript添加额外填充的情况下解决此问题，我将非常感激。
谢谢。