Question

我认为我在移动版（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>

enter image description here

Answer 1

我在这个问题中找到了解决方案：iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

如果你没有设置字体权重（例如font-weight: 400或font-weight: normal），那么移动Safari很难呈现虚假字体权重你需要专门设置它的css字体权重在移动野生动物园中正确渲染。

这是解决方案。

h2 {
  font-weight: 400;
}

Answer 2

请注意，默认情况下，Google Web Fonts仅导出常规权重（400），这可能会导致Mobile Safari（和其他浏览器）被强制使用虚假粗体。

要明确导出更大胆的权重，请选择＆＃34; CUSTOMIZE＆＃34;在Google Web Font字体选择窗格中，手动检查所需的每个额外权重，并使用更新的嵌入代码。

)] 1

Answer 3

我刚刚解决了一个类似的问题。我正在使用 Google Fonts 中的 Lato 字体系列，即使在明确使用 font-weight: 600 时，Safari 也会添加字母间距。

我只导入了字体粗细 400、500 和 600，因为这些是我使用的唯一粗细。几个小时后，我决定尝试导入字体粗细 700，这解决了我的问题......使用 font-weight: 600 时，Safari 不再添加字母间距！

因此，即使我明确使用 font-weight: 600，Safari 似乎也需要 700 变体来正确呈现 600 加权字体。很奇怪。

为什么iOS Safari会增加额外的字母间距？

3 个答案: