微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – 为什么iOS Safari添加额外的字母间距?

我想我已经发现了移动版(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;
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐