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).
After doing some research [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
and some tests playing with
-webkit-font-smoothing
It looks like Safari display the text first with :
-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.
Some explanations to that Safari problem ? Any better solutions ? Could my font be part of the problem ?
Thanks.
So I fixed my problem with applying:
body {
-webkit-font-smoothing: subpixel-antialiased;
}
Now my font is consistent on every browsers.
try both
{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
Just use this: 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"
problem solved for me this way!
Using -webkit-font-smoothing: subpixel-antialiased
worked 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: antialiased;
-moz-osx-font-smoothing: grayscale;
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.
the truth is that the solution to this problem (until apple fix this) is very simple. Create a css file (example.css) and inside insert this:
* {-webkit-font-smoothing:subpixel-antialiased;}
Then go to Safari > Preferences > Advanced > Style Sheet click it and select the css file that we just created. Restart Safari.
TADA!! Problem solved. For now
来源:https://stackoverflow.com/questions/21278020/font-weight-turns-lighter-on-mac-safari