Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
583 views
in Technique[技术] by (71.8m points)

css - 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). enter image description here enter image description here

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

So I fixed my problem with applying:

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

Now my font is consistent on every browsers.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...