css - Mac/Safari 上的字体粗细变轻

Question

在我上一个网站上，文本在 chrome 和 firefox 上自然完美，无需触及字体平滑或其他任何内容。
但在 Mac / Safari 7 上，文本看起来很好，然后立即变薄（太薄/不好看）。

在做了一些研究 [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
和一些测试之后

-webkit-font-smoothing    

看起来 Safari 首先显示文本：

-webkit-font-smoothing: subpixel-antialiased;

然后就在你得到闪烁效果之后，当它把字体变成：

-webkit-font-smoothing: antialiased;

所以在我看来，我别无选择，只能强迫

-webkit-font-smoothing: subpixel-antialiased;

使我的网站在所有浏览器上保持一致。
我正在使用字体 Avenir Std Roman。

对 Safari 问题的一些解释？有更好的解决方案吗？我的字体可能是问题的一部分吗？

谢谢。

Answer 1

所以我解决了我的申请问题：

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

现在我的字体在每个浏览器上都是一致的。

Answer 2

尝试两者

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}

Answer 3

只需使用这个： link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"

而不是这个： link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"

问题以这种方式为我解决了！

Answer 4

使用-webkit-font-smoothing: subpixel-antialiased有点作用，但 Safari、Chrome 和 Firefox 之间仍然存在很大差异。我意识到尝试在 Safari 中使字体更粗是行不通的，因此我在其他浏览器中使字体更轻，然后使用稍粗的字体粗细。最终对我来说跨浏览器的字体权重标准化是这样的：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Answer 5

尝试这个：

transform: translateZ(0.1px);

Mac 上的 Webkit 浏览器已知有抗锯齿 2d 和 3d 文本元素不同的问题。将 3d 属性赋予元素通常可以解决问题。