Css Mac/Safari上的字体重量变轻

在我的上一个网站上，文本在chrome和firefox上自然完美，不需要触摸字体平滑或其他任何东西。
但在Mac/Safari 7上，文本显示良好，然后立即变薄（太薄/不好阅读）。

在做了一些研究之后[cf
还有一些测试

-webkit-font-smoothing    

看起来Safari首先显示文本时使用了：

-webkit-font-smoothing: subpixel-antialiased;

然后，在获得闪烁效果之后，当它将字体转换为：

-webkit-font-smoothing: antialiased;

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

-webkit-font-smoothing: subpixel-antialiased;

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

关于狩猎问题的一些解释？ 有更好的解决办法吗？ 我的字体可能是问题的一部分吗

---

谢谢。

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

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

现在，我的字体在所有浏览器上都是一致的。

两种浏览器都试试

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

---

用这个： 链接href=”https://fonts.googleapis.com/css?family=Lato:100，100i，300300i，400400i，700700i，900900i“rel=”样式表“

而不是这个： 链接href=”https://fonts.googleapis.com/css?family=Lato“rel=”样式表“

---

这个问题就这样解决了！

使用

-webkit字体平滑：亚像素抗锯齿

有点效果，但Safari、Chrome和Firefox之间仍然有太大的区别。我意识到在Safari中尝试使字体更粗是行不通的，所以我在其他浏览器中使字体更轻，然后使用稍微粗一点的字体权重。对我来说，在不同浏览器中实现字体权重标准化的原因如下：

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

试试这个：

transform: translateZ(0.1px);

---

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

根据，

-Webkit字体平滑不再使用。你是说它在Safari中仍然有效果吗？当然，它仍然被使用！在所有Webkit浏览器中都有效果。@MrLi是的，但是通过这种方式，你的字体不再使用平滑的亚像素渲染。尝试使用（默认）亚像素渲染进行一些测试，并将字体下的所有背景div设置为黑色。这在我的许多情况下都有效。此外，亚像素渲染也被关闭（因此字体变薄）当你打开css时-webkit背面可见性：隐藏；在某些地方。实际上，Safari中的亚像素字体渲染非常棘手且不一致，但在某些情况下是可能的。这也解决了我今天的问题--Safari没有渲染Google字体（Lato，11px，700字体重量）与FF或Chrome相同；事实上，Safari似乎根本没有使用粗体文本。黑色文本上的灰色看起来是不同的灰色，尽管它不是。将此属性添加到我的CSS中完全解决了问题。这不是一个修复方法，事实上，这会影响网站中所有字体的权重，即使它们没有问题。这只是懒惰的编码。@JoshuaPekera与其说它是懒惰的，不如说它是懒惰的，你有什么建议作为解决方案？如果你对文本使用不透明度<1，那么
-webkit字体平滑：亚像素抗锯齿；
将不起作用设置笔划实际上比平滑效果大得多。对于某些区域，这真的很棒。谢谢！