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

Question

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

32

我认为我在移动设备（iOS 8）的Safari浏览器中发现了一个Google字体Web渲染错误。对我来说，似乎Mobile Safari会对所有使用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

- Andreas

我认为你已经回答了自己的问题，“Muli”不是一种网页安全字体，因此你可能会在某些浏览器中遇到意外行为，这就是你正在经历的情况。为了在各个浏览器之间保持一致性，最好使用不同的字体，最好是网页安全字体。这是最佳实践。 - EaziLuizi

3

我没有点踩，无论是谁点的，至少应该提供一个解释来说明为什么要点踩。这样做并不能促进在 SO 上更好的问题和答案。 - EaziLuizi

iOS Safari 应该支持 Google 字体，并且在所有其他现代浏览器中正确呈现，因此使用“Web 安全”字体不是一种替代方案。必须有另一个解决方案。这是问题的一个更简单的示例：https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html - Andreas

@sdcr不，我没有。请查看我的评论中的Dropbox链接，以获得更简单的解决方案。看看代码。 - Andreas

@Andreas，那个Dropbox链接不起作用，它忽略了非安全内容。 - Stickers

显示剩余2条评论

4个回答

17

请注意，Google Web Fonts 默认只导出普通字重（400），这可能会导致 Mobile Safari（和其他浏览器）强制使用伪粗体。

要显式导出更粗的字重，请在 Google Web Font 字体选择窗格中选择“自定义”，手动勾选您需要的每个附加字重，并使用更新的嵌入代码。

)]1

- Daniel Jones

1

解决了我的问题，没意识到浏览器在没有正确的字体文件的情况下会应用伪粗体。 - brandito

我发现你需要使用与加载的字体粗细完全匹配的字体粗细。在我的情况下，我为我的粗体样式使用了中等粗细（500），但将字体粗细设置为600，这会导致iOS添加额外的字母间距。一旦我开始使用600粗度字体，字母间距错误就消失了。 - Andrew Childs

1

我刚刚遇到了类似的问题并解决了。我使用的是来自Google Fonts的Lato字体系列，即使明确使用font-weight: 600，Safari也会添加字母间距。

我只导入了字体重量400、500和600，因为这些是我使用的唯一字体重量。经过多个小时的尝试，我决定也导入字体重量700，这解决了我的问题……当使用font-weight: 600时，Safari不再添加字母间距！

所以，即使我明确使用了font-weight: 600，Safari似乎还需要700变体才能正确呈现600加权字体。非常奇怪。

- Donovan Nevard

刚刚我也遇到了Vohlkov的这个问题。谢谢你发帖提醒。 - barrylachapelle

0

需要指定字重

@font-face {
    font-family: 'Din';
    src: url('./DinRoundRegular.otf');
    font-size: 16px;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Din';
    src: url('./DINRoundPro-Medi.ttf');
    font-size: 16px;
    font-style: bold;
    font-weight: 700;
}

- king roc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andreas · Accepted Answer

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

如果您不设置字体加粗（例如font-weight: 400或font-weight: normal），Mobile Safari会出现渲染虚拟字体加粗的错误。您需要明确设置CSS字体加粗，以便在移动版Safari中正确呈现。

这就是解决方案。

h2 {
  font-weight: 400;
}