爲什麼Chrome，Firefox和IE上的文本看起來比Safari更模糊？

我已經開始編寫一個新網站，並且遇到了這個問題，Safari上的文本看起來非常乾淨整潔，而其他瀏覽器上的文本看起來很模糊。我更新了所有瀏覽器，找不到原因。另外，我將Yosemite作爲我的操作系統。爲什麼Chrome，Firefox和IE上的文本看起來比Safari更模糊？

以下是樣本截圖： http://gyazo.com/11818058c27469040e53650ea5c35e78 Safari瀏覽器上的左（夏普），鉻右側（模糊）

這裏是我的HTML：

<html> 
<link rel="stylesheet" type="text/css" href="../Project v2/css/style.css"> 
<head><title>Company</title></head> 
<body> 
<nav> 
<ul> 
<li>about us</li> 
<li>Who we are</li> 
<li>Contact us</li> 
</ul> 
</nav> 
</body> 
</html>

和我的CSS：

body{ 
    background: url("/Users/Project/Desktop/Project v2/Assets/bg.jpg") no-repeat center center fixed; 
    background-size: cover; 
    margin: 0%; 
} 
nav ul{ 
    list-style: none; 
} 
nav{ 
    text-align: center; 
    margin-top:200px; 
    margin-right: 50px; 
    font-size: 20px; 
    color: white; 
    font-weight: 5; 

}

來源

2014-11-02 IE8IsBetterThenGoogleChrome

我的猜測是因爲渲染引擎（WebKit vs Gecko vs Trident）和操作系統（OSX已經知道它漂亮的文本渲染）的差異。只要你沒有使用CSS3轉換，我想你無法控制它。 – 2014-11-02 19:55:55

CSS3轉換？此外，在較舊的顯示器上，這個問題更糟糕，這使得文本看起來非常模糊。他們有什麼方法可以在所有現代瀏覽器中獲得Safari級別的清晰度？ – IE8IsBetterThenGoogleChrome 2014-11-02 20:00:37

如果你談論「舊顯示器」，那麼你添加了更多你無法控制的變量。另一方面，薩欽的答案可能是你需要的。 – 2014-11-02 20:54:11

不要在字體重量中使用5，它在這裏不是標準值。

font-weight:500;

嘗試從谷歌的字體或Adobe邊緣網頁字體的另一個字體。如果在渲染引擎時字體字距可能是錯誤的，這也可能是這種情況。請記住使用全字體堆棧（.eot和woff）或Web服務。另一種方法是使用em或rem作爲主要單位。當縮放內容響應時，它們更有用。

來源

2014-11-02 20:02:37

爲什麼Chrome，Firefox和IE上的文本看起來比Safari更模糊？

回答

相關問題