html - 为什么 Windows 和 Mac OS X 上的行高存在 @font-face 差异？

Question

我一直在寻找一个小时的答案，但没有运气。

我使用“line-height”CSS 属性将文本在框内垂直居中。这适用于标准安全字体，也适用于 Windows 上的“@font-face”字体嵌入。

然而，在 Mac 上，使用“@font-face”的这种居中方式存在问题。请参阅:http://cl.ly/QBlE/o

我不知道该怎么办。解决此问题的唯一方法是为 Mac 使用不同的行高。但据我所知，如果没有 JavaScript 或服务器端编程，这是不可能的，而且似乎不是适合我的解决方案。

示例(顶部的蓝色框):

#header .login {
    text-decoration:none;
    margin:11px 9px 0 9px;
    float:right;
    font-size:11px;
    color:#fff;
    background:url(../img/header-login.png);
    width:118px;
    height:26px;
    line-height:26px;
    padding:0 0 0 10px;
    text-transform:uppercase;
    font-family: 'Helvetica55', Sans-Serif;
}

Answer 1

不要使用不同的行高，而是尝试使用值为 auto 的 font-size-adjust 属性。

来自W3C :

In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.