css - chrome 上的字体渲染问题

Question

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

Chrome 浏览器:

Chrome 苹果机:

如您所见，Windows 上的字体很难阅读。我尝试使用:

-webkit-font-smoothing: antialiased;

但是没有用。关于如何解决此问题的任何想法？

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

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>

有关更多详细信息和解释，请参阅来源:How to apply font anti-alias effects in CSS?