Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

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

iphone - iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

This one is quite specify: specify ttf font rendering font-weight:bold incorrectly on iOS mobile safari, open demo site with iphone/ipad with iOS 4.2/4.3 Beta 3 or above:

(this is Reenie+Beanie from google fonts)

http://jsbin.com/ojeqe3/16/

Screen capture

You see the bold font look double rendered. This is not significant for small and medium font size, but quite significant for large font-size / zoom in

My friend will report this bug to apple. However, anything he can do to solve the bug? (kill the text-adjust is not OK)

Update: This one is not fixed in iOS5.

The best solution I know for the problem will be

  1. Use font-weight:normal (as shown in demo)
  2. Use either -webkit-text-stroke or text-shadow to make it look "bold" (plus iPad only css - body prefix added by js, not only media query)
See Question&Answers more detail:os

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

1 Answer

0 votes
by (71.8m points)

Had the same issue with an h1 inheriting the font-weight: bold; from a parent class. Just overwrite the inherited style with a font-weight: normal;


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...