字体平滑。这里的诀窍是什么？

Question

我发誓我已经尝试过这一千次，尽管我已经看过每一个教程都发誓，它仍然逃脱了我。我无法看到我生活中的不同。我瞎了吗？它真的有效吗？我错过了什么吗？

这是我的FIDDLE测试

根据ICON DEPOSIT以及CSS-Tricks等其他内容，这是呈现平滑字体的主要css

html, html a {
     text-rendering: optimizeLegibility !important;
     -webkit-font-smoothing: antialiased;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

这里有一些视觉有和没有

我在所有主流浏览器中进行测试，如果不推荐使用这些属性，我想知道是否有人知道当前的方式

所以......谁？

Answer 1

也许这不是你问题的答案，但是又一次......但是，如果使用.SVG字体，可以在Chrome中对字体进行抗锯齿处理，但仅限（现在）。查看this article示例。你可以看到差异。

1. Without SVG fonts
2. With SVG fonts

Answer 2

要回答你的问题，是的，有区别，不，你不是盲目的。值antialiased和none之间存在巨大差异，但由于Webkit人员很聪明，因此默认情况下会启用它。因此，即使您正在添加一个非常有用的规则，您也只是看不出有什么不同，因为浏览器已经添加了规则。

这是您的小提琴的调整版本，显示了antialiased和none之间的区别： http://jsfiddle.net/xz8Vf/8/

最后，添加字体平滑是一种很好的做法，因为在某些情况下，尽管存在默认的浏览器样式，但实际上会存在非常显着的差异。所以这些样式只是帮助平衡游戏领域，有点像你在重置样式表中使用其他样式。

希望这有帮助！