我想我已经发现了移动版(iOS 8)Safari中的Google字体的网页呈现错误.在我看来,Mobile Safari在使用Google字体的所有文字中添加了一小段字母间距,或者使用另一种字体.我尝试哪个Google字体(Open Sans)无关紧要.它在所有现代浏览器上正确呈现.经测试的
Android,FF,Chrome,Safari.
尝试在iOS设备上加载此页面,看看我的意思.另见代码和屏幕截图.查看此链接的实时评论：https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html
<!DOCTYPE html> <html> <head> <title></title> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> </head> <body> <h2 style="font-family: 'Roboto'">Roboto: Looks like it gets a bit extra line-spacing in iOS Safari,though this is not possible to find in web inspector</h2> <h2 style="font-family: 'Arial'">Arial: Works fine in iOS Safari</h2> </body> </html>
解决方法
我在这个问题上找到了解决方案：
iOS 4.2+ webfont (ttf) ‘s bold font-weight rendering bug
如果您没有设置字体重量(例如,font-weight：400或font-weight：normal),则Mobile Safari可以渲染人造字体的重量.您需要专门设置css字体的权重才能正确呈现移动野生动物园.
这是解决方案.
h2 {
font-weight: 400;
}
