为什么我的嵌入字体渲染不正确？

Question

我正在使用 google fonts api，该字体在 Google 上看起来很棒，但是当我尝试使用它时，它无法正确呈现。这是一个示例：

https://twitter.com/dontdie/status/129234318299111424/photo/ 1

这是在 Chrome 中，两个不同的选项卡。由于某些原因，Chrome 不使用“子像素渲染”（ http://en.wikipedia.org/wiki/ Subpixel_rendering ）在我的网站上，但在 Google 上它已打开。

Answer 1

我想我已经明白了这一点。将这些规则添加到我的样式表中似乎可以解决此问题：

body, body * {
  background-color: #fff;
  -webkit-font-smoothing: subpixel-antialiased;
}

仅设置 subpixel-antialiased 不起作用，仅向正文添加背景颜色也不起作用。这可能可以简化为仅选择 * 或 html *。此外，鉴于 subpixel-antialiased 是默认设置，删除该规则也应该有效。