Why is iOS Safari adding extra letter-spacing?

问题:

I think I have found a web rendering bug for Google Fonts in Mobile (iOS 8) Safari. It seems to me that Mobile Safari adds a tiny bit of letter-spacing to all text that uses Google Fonts, or that it uses another font. It doesn't matter which Google Font I try (Open Sans). It renders correctly on all modern browsers. Tested Android, FF, Chrome, Safari.

Try to load this page on a iOS device to see what I mean. See also see code and screenshot. See this link for live review: https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html

      
Roboto: Looks like it gets a bit extra line-spacing in iOS Safari, though this is not possible to find in web inspector
   
Arial: Works fine in iOS Safari
   

回答1:

I found the solution in this question: iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

Mobile Safari is buggy rendering faux font weights, if you don't set the font-weight (to eg. font-weight: 400 or font-weight: normal) You need to specifically set the css font weight for it to render correctly in mobile safari.

This is the solution.

h2 {   font-weight: 400; }

回答2:

Note that Google Web Fonts only exports the regular weight (400) by default, which can lead to Mobile Safari (and other browsers) being forced to impose faux bold.

To explicitly export bolder weights, select "CUSTOMISE" in the Google Web Font font selection pane, manually check each additional weight you require, and use the updated embed code.

)]1

文章来源: Why is iOS Safari adding extra letter-spacing?