为什么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更模糊？

回答

相关问题