Chrome字体渲染问题

Question

我在Windows Chrome上使用Google Lato字体，大小为10像素，字重为300时，遇到了字体渲染问题。以下是Mac和Windows上的渲染对比：

Chrome Windows：

Chrome Mac:

正如您所见，Windows 上的字体非常难以阅读。我尝试过使用：

-webkit-font-smoothing: antialiased;

但是它没有起作用。有什么想法可以修复这个问题吗？

以下是一个示例：https://jsfiddle.net/Lcj9yxuo/

- uksz

---

你尝试过使用 text-rendering: optimizeLegibility 吗？ - Niek Nijland

刚试了一下，没有帮助。 - uksz

你能创建一个片段来复现这个问题吗？ - DaniP

@DaniP，我添加了示例。 - uksz

从你的代码中，我看到的问题只是颜色不同。 - Vixed

Answer 1

你可以在样式中添加一些文本阴影

label{
  font-family: Lato;
  font-weight:300;
  font-size:10px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0,0,0,.2) 0 0 1px;
  text-shadow: rgba(0,0,0,.2) 0 0 1px;
}

<link href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,300italic,400italic,700italic&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">

<label>
gwarancja niskich cen
</label>

更多细节和解释请参见源代码：如何在CSS中应用字体反锯齿效果？

- Belhassen Chelbi

---

这并没有改变渲染 - 它看起来和没有这个样式时完全一样。 - uksz