CSS Mac/Safari 上的字体重量变轻
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21278020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font weight turns lighter on Mac/Safari
提问by migswd
On my last website, the text is perfect naturally on chrome and firefox without touching font-smoothing or anything else.
But on Mac / Safari 7 the text appears well then turns immediately thinner (too much thinner / not nice to read).
在我的上一个网站上，文本在 chrome 和 firefox 上自然是完美的，没有触及字体平滑或其他任何东西。
但是在 Mac / Safari 7 上，文本显示得很好，然后立即变薄（太薄/不好看）。
After doing some research [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
and some tests playing with
在做了一些研究 [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
和一些测试之后
-webkit-font-smoothing
It looks like Safari display the text first with :
看起来 Safari 首先显示文本：
-webkit-font-smoothing: subpixel-antialiased;
Then just after you got the flickering effect, when it is turning font to :
然后就在你得到闪烁的效果之后，当它把字体变成：
-webkit-font-smoothing: antialiased;
So it seems to me that I had no choice but to force
所以在我看来我别无选择，只能强迫
-webkit-font-smoothing: subpixel-antialiased;
to make my website consistent on all browsers.
I am using font-face Avenir Std Roman.
使我的网站在所有浏览器上保持一致。
我正在使用字体 Avenir Std Roman。
Some explanations to that Safari problem ? Any better solutions ? Could my font be part of the problem ?
对 Safari 问题的一些解释？任何更好的解决方案？我的字体可能是问题的一部分吗？
Thanks.
谢谢。
回答by migswd
So I fixed my problem with applying:
所以我解决了我的申请问题：
body {
-webkit-font-smoothing: subpixel-antialiased;
}
Now my font is consistent on every browsers.
现在我的字体在每个浏览器上都是一致的。
回答by Mihir ajagia
try both
两个都试试
{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
回答by Martin Jutras
Just use this: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:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"
Instead of this:link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"
而不是这个：link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"
problem solved for me this way!
问题以这种方式为我解决了！
回答by Gavin
Using -webkit-font-smoothing: subpixel-antialiasedworked a little bit, but there was still too much of a difference between Safari, Chrome, and Firefox. I realized trying to make the font thicker in Safari wasn't going to work, so instead I made the font lighter in other browsers and then used a slightly thicker font weight. What ended up normalizing the font weights across browsers for me is this:
使用-webkit-font-smoothing: subpixel-antialiased有点效果，但 Safari、Chrome 和 Firefox 之间的差异仍然太大。我意识到在 Safari 中尝试使字体更粗是行不通的，因此我在其他浏览器中使字体更轻，然后使用稍粗的字体粗细。最终使我跨浏览器的字体权重标准化的是：
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
回答by Rauli Rajande
Try this:
尝试这个：
transform: translateZ(0.1px);
Webkit browsers on Mac has known problem with antialiasing 2d and 3d text elements differently. Giving the 3d property to the element usually fixes the problem.
Mac 上的 Webkit 浏览器在以不同方式对 2d 和 3d 文本元素进行抗锯齿方面存在已知问题。为元素赋予 3d 属性通常可以解决问题。
