Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)
like image 954
vincicat Avatar asked Feb 21 '11 18:02

vincicat


1 Answers

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;

like image 107
Chris Caldwell Avatar answered Oct 01 '22 13:10

Chris Caldwell