Google Web 字体在移动版 Safari 和桌面版上呈现不同 Chrome？

Question

Google 网络字体 (Signika) 在桌面和移动设备上的呈现方式不同。如这些屏幕截图所示，移动设备上的字距调整（字母之间的 space）比桌面设备大，笔画更细。桌面上的字母看起来也更清晰，虽然这更主观。

桌面 (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>

自托管字体样式表的 Signika 部分：

@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/signika/v10/vEFR2_JTCgwQ5ejvG18mBlprZ0gk0w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/signika/v10/vEFR2_JTCgwQ5ejvG1EmBlprZ0g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Answer 1

@crashalot 字体在 Safari 上看起来与 Chrome 不同的原因是 webkit 略有不同。真正避免这个问题的唯一方法是下载字体文件，然后 link 它们：

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

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

Answer 2

根据您的问题，我不确定您是否对修复方面的原因或修复方式更感兴趣。假设如何修复：

既然你使用了字距调整这个词，你可能已经意识到这一点，但我能够通过调整以下内容来匹配外观：

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

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

font-kerning: none; 稍微严重一些，但确实有助于引擎之间的正常化。

供参考，

因此，如果您愿意，您可以通过许多其他检查检测移动 and/or safari（已在其他问题中回答，因此我将在此处省略），然后应用 CSS 多于。

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

Answer 3

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

非常沮丧，但希望我们的痛苦能帮助到别人。

Google Web 字体在移动版 Safari 和桌面版上呈现不同 Chrome？

Google web font renders differently on mobile Safari vs. desktop Chrome?

html

css

fonts

font-face

google-webfonts