在Chrome和Firefox中匹配「Helvetica Neue」

我目前在我正在開發的網站上使用Helvetica Neue。在過去幾個月中，我注意到Google Chrome中的Helvetica Neue字體呈現出非常大膽。在Firefox中查看同一網站時，一切看起來都好多了，並且和預期的一樣。在Chrome和Firefox中匹配「Helvetica Neue」

下面是參考的對比截圖：

enter image description here

這部分的CSS規則相當簡單：

#top-bar { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    height: 30px; 
    color: #ccc; 
    font-size: 80%; 
    line-height: 30px; 
} 

#top-bar a { 
    color: #eee; 
}

任何人都可以解釋爲什麼字體看起來在這兩個瀏覽器，因此不同？即使font-weight: normal沒有任何作用，它幾乎看起來像Chrome正在渲染較重的字體重量。這個網站也不是唯一的。任何使用Helvetica Neue的站點（包括Bootstrap Docs）都會在我的PC上（以及其他運行Chrome的用戶）遭受這種情況。在Mac上一切都很好。

有沒有解決方案？例如，在Chrome中模仿FF的字體渲染技術？

來源

2013-10-17 BenM

無論瀏覽器如何，Helvetica Neue在Windows上渲染都很差。 – BoltClock

我知道，但它並不能解釋爲什麼它在Windows上呈現更好的FF。我想問的是如何在Chrome中匹配FF的渲染。 – BenM

Helvetica Neue不適用於大多數電腦。如果你通過@ font-face來提供它，你應該描述這個並確定字體和字體文件的來源。 –

這是因爲Firefox支持硬件加速的DirectWrite API（Direct2D的一部分）來呈現字體，而Chrome則不支持。例如見：

即使你在Firefox中關閉硬件加速，因爲這兩種瀏覽器都使用不同的字體渲染後端的結果是不同的。

來源

2013-10-17 10:24:23 nwellnhof

感謝您的輸入！我想這是一個坐等問題。 – BenM

在Chrome和Firefox中匹配「Helvetica Neue」

回答

相關問題