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;

使我的网站在所有浏览器上保持一致 我正在使用font-face 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属性通常可以解决问题。

Answer 6

事实上，这个问题的解决方案（直到苹果修复此问题）非常简单。 创建一个css文件（example.css）并在里面插入：

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

然后去Safari＆gt;偏好＆gt;高级＆gt;样式表单击它并选择我们刚刚创建的css文件。重启Safari。

TADA !!问题解决了。现在