7

我一定已经浏览了谷歌的每一页，但还没有找到解决方案。我有一个通过 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 添加额外填充的情况下解决此问题，我将不胜感激。

谢谢你。

4

1 回答 1

0

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

普通的

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

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

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

于 2013-05-10T08:12:17.807 回答