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的

回答

相關問題