一尘不染

在Mac / Safari上字体粗细变轻

css

在我的上一个网站上,该文本在chrome和firefox上自然是完美的,而无需触摸字体平滑或其他任何内容。
但是在Mac / Safari 7上,文本看起来很好,然后立即变细(太细/不好看)。 在此处输入图片说明 在此处输入图片说明

经过一些研究和一些测试

-webkit-font-smoothing    

看起来Safari首先显示带有以下内容的文本:

-webkit-font-smoothing: subpixel-antialiased;

然后,在获得闪烁效果后,将字体变为:

-webkit-font-smoothing: antialiased;

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

-webkit-font-smoothing: subpixel-antialiased;

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

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

谢谢。


阅读 961

收藏
2020-05-16

共1个答案

一尘不染

所以我通过应用解决了我的问题:

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

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

2020-05-16