2012-03-12 105 views
4

我在Internet Explorer和Firefox(以及Chrome瀏覽器)中出現相同字體(相同字體名稱&大小)不同的問題。瀏覽器中相同字體的不同顯示

這是IE9的樣子(希望細節足夠高,顯示字體比較厚/有一個更高的重量比它應該): enter image description here

這是火狐等模樣: enter image description here

是否有一個CSS重置,將獲得瀏覽器之間的字體的一致性?也許是IE瀏覽器的黑客?

繼承人的頁面的簡單的HTML:

<!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"> 
<head> 
    <style type="text/css"> 
    <!-- 
     body { 
      color: RGB(102,102,102); 
      font-size: 13px; 
      font-family: "Arial", "Helvetica", serif; 
     } 
    --> 
    </style> 

</head> 
<body> 
    <p>Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa...</p> 

</body> 
</html> 
+0

哪個版本的Firefox是那個? – thirtydot 2012-03-12 04:31:22

+0

Firefox 10.0.2。 @GGG我同意你的意見,但我沒有把球傳送給我的老闆:P – 2012-03-12 06:04:42

回答

0

試試這個小動作,它可能會或可能不會根據字體類型的工作,即:自定義字體

..from html5bolierplate

html{ 
    font-size:100%; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-stroke: 0 0 0 transparent; 
} 
0

瀏覽器通常具有不同的字體呈現(以及幾乎所有)。你應該嘗試使用CSS重置。 Eric Meyer has oneYUI has one以及其他幾個框架。對於具體情況,你應該尋找一個「重置」(這可以歸零所有樣式)或「基地」(提供歸一化樣式)

5

不,沒有CSS重置或技巧或黑客可以使所有瀏覽器顯示字體相同。相同的字體在不同的瀏覽器中呈現不同。即使在同一瀏覽器中相同的字體也可能在不同系統上呈現不同的效果

CSS重置將有助於使默認值更加一致,如果它是例如標題標記,其中某些標題默認爲粗體而其他標題爲粗體且默認值在瀏覽器之間略有不同,則可能有所幫助。當尺寸和重量設定值時,它無法提供幫助。

您可以進行破解,使其看起來像您在某些特定瀏覽器中所需的方式,但該瀏覽器的所有用戶可能不需要它。雖然對某些人來說可能會更好,但實際上可能會讓其他人看起來更糟糕。


附註:我注意到,你使用serif作爲後備的ArialHelvetica。您想要使用sans-serif,以便在使用回退時看起來更加相似。


另一個側面說明:我看到你使用的風格標籤,這是僅適用於不明白CSS在所有的瀏覽器非常有用,例如Internet Explorer的1.0的註釋中。

0

這是一個字體重量問題。嘗試添加如下內容:

p { 
    font-weight: 400; 
} 
相關問題