Question

Google网络字体（Signika）在台式机和移动设备上的呈现方式不同。如这些屏幕截图所示，移动设备上的字距（字母之间的间隔）比台式机大，笔划更细。桌面上的字母也看起来更清晰，尽管这更加主观。

台式机（Chrome）：

移动设备（Safari，iOS 12）：

Codepen：

https://codepen.io/Crashalot/pen/3ff682e5aa123e1ac293ab19b06f1285

#pageBox h1 {
  margin: 30px auto;
  text-align: center;
}

h1 {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2em;
}

h1,
h2,
h3,
h4 {
  font-family: "Signika", Verdana, Tahoma, Arial, Sans-Serif;
  color: #7C7A7D;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Signika|Source+Sans+Pro:400,700" rel="stylesheet">
</head>

<body>
  <div id="pageBox">

    <div class="header">
      <h1> Icon Editor </h1>
    </div>

  </div>
</body>

Answer 1

从您的问题中我不确定您是否对为什么或如何解决方面更感兴趣。假设如何解决：

由于使用了字距调整，您可能已经意识到了这一点，但是我可以通过调整以下内容来匹配外观：

body { 
     letter-spacing: -0.1px; 
     transform: scale(1.05, 0.95);
}

如果您觉得不合适，那么这些值当然可以调整。

font-kerning: none;稍微严重一点，但确实有助于在引擎之间进行标准化。

供参考，

因此，如果您愿意，可以通过许多其他检查（在其他问题中已经回答过，因此在此省略）检测移动和/或野生动物园，然后再应用上面的CSS。

如果实际上您是在问为什么存在差异，那归结于渲染引擎-但是我现在假设您正在询问外观的标准化。

Answer 2

@crashalot之所以Safari上的字体与Chrome上的字体不同，是因为Webkit稍有不同。真正避免此问题的唯一方法是下载字体文件，然后将它们链接：

body {
...
font-family: Signika;
...
}

@font-face {
font-family: Signika;
src: url(signika.ttf);
}

Answer 3

事实证明，如果您使用字体不支持的font-weight（例如，字体文件仅提供400和600的粗细，但您选择700的粗细），则Safari会更改字体。指定支持的重量或使用normal消除了此问题。

极其沮丧，但希望我们的痛苦可以帮助某人。

Google网络字体在移动版Safari和台式机Chrome上的呈现方式有所不同吗？

3 个答案: