相同字體在FF7和Chrome中呈現的方式不同

Question

截圖 ： http ： //i.imgur.com/QVBGx.png

很明顯，我的網站在Win7機器上的Chrome和FF7上呈現出不同

我用這個：

h1, h2 {font-family: "Lucida Grande", "Helvetica Neue", Arial; }

有人可以指出我該如何區分這些差異嗎？ 我不希望每個瀏覽器上的字體具有不同的“感覺”。

我的Windows機器中安裝了Lucida Grande字體

編輯：字體粗細：正常！重要

也不起作用

Answer 1

看起來這兩個瀏覽器正在以不同的權重渲染它。

我可以想到兩種可能性，盡管我不知道這兩種說法是否正確。

• 您要求使用粗體字體，但是該字體不能用粗體顯示。 一個瀏覽器僅顯示不變的常規非粗體變體，而另一個瀏覽器將其處理為粗體。

• 您要求特定的字體粗細，例如“粗體”或“ 600”，但安裝的字體與該粗細不完全匹配。 一個瀏覽器正在替換字體的“超粗體”，而另一個則是“常規加粗”或類似的性質。

如果以上任一方法都正確，則可以使用font-weight CSS屬性嘗試對其進行更改。 但是，如果在完全沒有Lucida Grande字體的系統上查看該字體，則這可能會影響所選字體的替換。

Answer 2

字體總是會在一個瀏覽器和另一個瀏覽器之間呈現出一些細微的差異，但是這與平時相比有所不同。 可能是因為標頭具有font-weight: bold; 默認情況下，字體沒有粗體變化，因此瀏覽器會以不同的方式根據常規粗細創建粗體樣式。

無論如何，您可能想使用更多常見的字體。 在我的Windows 7計算機上，既沒有Lucida Grande也沒有Helvetica Neue，因此可以使用Arial進行渲染。 盡管如此，我還有MS Office和Photoshop隨附的其他字體，所以我安裝的字體比標准系統所期望的要多得多。

另外，您應始終將通用字體指定為最后的手段，在這種情況下為sans serif ，否則，如果未安裝任何sans serif ，則它將使用默認字體進行渲染，例如Times Roman ，外觀完全不同。 也許還要添加Helvetica ，它與非Windows系統上的Arial最接近。