为什么iOS Safari添加额外的字母间距？ [英] Why is iOS Safari adding extra letter-spacing?
问题描述
我想我已经在移动版（iOS 8）Safari中发现了Google字体的网络渲染错误。在我看来，Mobile Safari为所有使用Google字体的文本或使用其他字体的文本添加了一小部分字母间距。我试用的Google字体（Open Sans）无关紧要。它在所有现代浏览器上正确渲染。经测试的Android，FF，Chrome，Safari。
尝试在iOS设备上加载此页面以查看我的意思。另请参阅代码和屏幕截图。查看此链接以进行实时评论：
$ b 如果您没有设置字体权重（例如： font-weight：400 或 font-weight：normal ）您需要专门设置css字体权重才能在移动Safari中正确呈现。
这是解决方案。
h2 {font-weight：400;}
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
<!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>
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;
}
这篇关于为什么iOS Safari添加额外的字母间距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
