为什么Windows和Mac OS X上的行高有@ font-face差异?

Mac*_*kou 7 html css macos font-face

我一直在寻找一个小时的答案而现在没有运气.

我使用"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;
}
Run Code Online (Sandbox Code Playgroud)

小智 1

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

来自W3C:

在发生字体回退的情况下,回退字体可能不会与所需字体系列共享相同的宽高比,因此会显得可读性较差。font-size-adjust 属性是一种在发生字体回退时保持文本可读性的方法。它通过调整字体大小来实现此目的,以便无论使用何种字体,x 高度都相同。