Font weight turns lighter on Mac/Safari

问题:

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.

回答1:

So I fixed my problem with applying:

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

Now my font is consistent on every browsers.

回答2:

try both

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

回答3:

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!

回答4:

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;

回答5:

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.

回答6:

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