Helvetica Neue字体基线渲染问题与Firefox/Mac的

考虑这个HTML：Helvetica Neue字体基线渲染问题与Firefox/Mac的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<style type="text/css"> 
body { 
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
    line-height:20px; 
    font-size:14px; 
} 
.a { 
    float:left; 
} 
.b { 
    font-weight:bold; 
} 
</style> 
</head> 

<body> 
    <div class="a">something1</div> 
    <div class="a b">something2</div> 
</body> 
</html>

在所有的浏览器但Firefox/Mac上，它呈现正确，即大胆和非粗体文字在同一基线。

在Firefox/Mac上，粗体文本和非粗体文本之间存在1px的基线差异。请参阅下面的截图。左边是Safari 3.2.3，右边是Firefox 3.0.10。

alt text http://www.jaanuskase.com/stuff/helveticaneue_ff_safari.png

有什么办法解决这个问题如一些CSS，除了去静静地在角落里哭，并使用宋体（这我并不想这样做 - 我会留在Helvetica Neue字体如果我能）。

来源

2009-05-27 Jaanus

切换字体为黑体（未抵达Neue），它似乎是正常体重这是问题，而不是t他大胆。 – 2009-05-27 23:09:23

嗯......当我切换到Helvetica时，似乎没有任何基准问题......所以特别是Helvetica Neue是罪魁祸首？ – Jaanus 2009-05-27 23:15:19

没错，但是当你刷新时，正常体重会向上移动，而粗体只会向上移动一点，这表明它有渲染问题。 – 2009-05-27 23:29:24

针对行高可以解决这个问题，但不知道它是否是罪魁祸首。如果你有CSSEdit（或者刷新很多），你可以一次增加行高1px来观察行为。

字体大小14px使它几乎不可能。 FF会将粗体元素1像素放置在某些线条高度，Safari会将其放在完全相反的位置！（即线条高度为20px的safari会在firefox正常渲染时丢弃粗体1像素，这与您的问题相反）。

除了在3像素行高处的，两者都呈现相同。但是3像素的行高是奇怪的，如果它打乱了布局，您可能需要调整margin-top。

body { 
    font: 14px "Helvetica Neue"; 
} 

.b { 
    font-weight: bold; 
} 

.a { 
    line-height: 3px; 
    float: left; 
    margin-top: 9px; 
}

在13像素的所有内容的字体大小使得在两个相同的在21px线高度（更接近常规的行高。

与不同的字体大小和播放啉高度我敢肯定你会发现你所需要的

或者破解它，如果这就是你怎么滚。

body { 
    font: 14px "Helvetica Neue"; 
} 

.b { 
    font-weight: bold; 
} 

.a { 
    line-height: 21px; 
    float: left; 

} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 

/* Safari 3.0 and Chrome rules here */ 

    .a { 
     line-height: 20px; 
    } 

}

来源

2009-05-27 23:28:08

我的直觉反应是漂浮者行为异常。我没有Mac，但是你可以尝试这样做：

<span>something1</span><span class="b">something2</span> 
<span class="a">something3</span><span class="a b">something4</span>

然后看看他们的基线是否正确？

来源

2009-05-27 21:03:01 varl

Helvetica Neue字体基线渲染问题与Firefox/Mac的

回答

相关问题