chrome上的字体渲染问题答案

【问题标题】：Issue with font rendering on chromechrome上的字体渲染问题
【发布时间】：2017-08-17 12:37:45
【问题描述】：

我在 Windows Chrome 上出现字体渲染问题。我使用的是 Google Lato 字体，大小 10px，字体粗细 300。这是在 Mac 和 Windows 上渲染的比较：

Chrome 窗口：

Chrome Mac：

如您所见，Windows 上的字体很难阅读。我试过用：

-webkit-font-smoothing: antialiased;

但它没有奏效。有关如何解决此问题的任何想法？

这里是一个例子：https://jsfiddle.net/Lcj9yxuo/

【问题讨论】：

你试过了吗：text-rendering: optimizeLegibility
刚试过。没有帮助。
你能创建一个 sn-p 来重现这个问题吗？
@DaniP，我添加了示例。
从你的小提琴，我看到的问题只是色差

标签： css windows google-chrome

【解决方案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>

更多细节和解释见源：How to apply font anti-alias effects in CSS?

【讨论】：

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