清洁文本渲染

Question

我在我的网站上使用“open sans”字体。但它渲染不清晰和脏边缘字体。 以下图片

但我在另一些网站上看到他们使用的是同样的开放式无字体，但它非常干净且视网膜准备就绪图像

为什么我的文字边缘不整洁且不干净？

附加：我尝试禁用样式表代码，文本呈现清晰，视网膜准备就绪。但我错过了什么？

Answer 1

我相信我知道如何解决这个问题...将此问题添加到您的css：

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

我现在将它添加到我的所有网络项目中。它使字体看起来更清晰：）

Demo

此外，使用网页字体时，最好刻意指定字体粗细。

h1 {
    font-family: 'Open Sans';
    font-weight: 300; /* 300 is the "light" version of the font, 400 would be "normal" */
}