html - 干净的文本渲染

Question

我在我的网站上使用“open sans”字体。但它呈现不清晰和肮脏的边缘字体。 下图

但我在其他一些网站上看到他们使用的是相同的 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" */
}