谷歌网页字体在移动版 Safari 和桌面版 Chrome 上的呈现方式不同？

Question

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

桌面（Chrome）：

移动设备（Safari、iOS 12）：

代码笔：

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

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

非常令人沮丧，但希望我们的痛苦可以帮助某人。

Answer 2

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

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

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

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

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

以供参考，

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

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

Answer 3

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

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

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