Question

我已经开始编写一个新网站并遇到了这个问题，Safari上的文字看起来非常清晰干净，而其他浏览器上的文字看起来很模糊。我已经更新了所有浏览器，但找不到原因。另外，我正在运行Yosemite作为我的操作系统。

以下是截图示例： http://gyazo.com/11818058c27469040e53650ea5c35e78 左侧的Safari（夏普），右侧的Chrome（模糊）

这是我的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;

}

Answer 1

不要在字体粗细中使用5，这不是标准值。

font-weight:500;

尝试使用google fonts或adobe edge web字体中的其他字体。如果在渲染引擎上字体字距调整可能是错误的，那么这也可能是一个例子。并记住使用完整的字体堆栈（.eot和woff）或Web服务。另一个是使用em或rem作为主要单位。当缩放内容响应时，它们会更有用。

为什么Chrome，Firefox和IE上的文字看起来比Safari更模糊？

1 个答案: