2015-03-03 97 views
19

我想我已经在移动版(iOS 8)Safari中发现了Google字体的网络渲染错误。在我看来,Mobile Safari为所有使用Google字体的文本或使用其他字体的文本添加了一小部分字母间距。我试用的Google字体(Open Sans)无关紧要。它在所有现代浏览器上正确渲染。经过测试的Android,FF,Chrome,Safari。为什么iOS 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

+0

我想你已经回答了你自己的问题,“木里”不是一个网络安全的字体,因此,你可以期望在某些浏览器意外的行为是你正在经历。为了浏览器之间的一致性,请使用不同的字体,最好使用网络安全字体。这是最佳做法。 – EaziLuizi 2015-03-03 14:17:14

+3

仅供参考,我没有投票,谁曾经做过投票,至少提供了一个解释为什么你投了票。这不会促进SO中更好的问题/答案。 – EaziLuizi 2015-03-03 14:19:29

+0

iOS Safari应该支持谷歌字体,并在所有其他现代浏览器中正确呈现,因此使用“网页安全”字体不是一种选择。必须有另一种解决方案。这里是一个更简单的问题示例:https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html – Andreas 2015-03-03 14:25:23

回答

34

我发现这个问题的解决方案:iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

移动Safari浏览器是马车渲染虚假的字体粗细,如果你不要设置字体权重(例如font-weight: 400font-weight: normal)您需要专门设置css字体重量让它在移动Safari浏览器中正确渲染。

这是解决方案。

h2 { 
 
    font-weight: 400; 
 
}

+0

如果可以的话,我会给你1000个upvotes。就这个问题浪费了3个小时。 – 2015-12-09 11:42:03

+2

我有一个类似的问题:我设置的重量,但实际上并没有加载该字体的重量。 – AlexKempton 2016-05-23 16:22:19

6

需要注意的是谷歌的Web字体只能在默认情况下,这可能会导致移动Safari浏览器(以及其他浏览器)出口的常规重量(400)被强制征收仿粗体。

要明确导出粗体重量,请在Google Web Font字体选择窗格中选择“CUSTOMIZE”,手动检查您需要的每个额外重量,然后使用更新后的嵌入代码。

([Screenshot: Google Fonts customise pane)] 1

+0

解决了我的问题,没有意识到浏览器在没有正确的字体文件的情况下应用了仿粗体, – Brandito 2017-12-13 03:22:53

相关问题