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

【问题标题】：Google web font renders differently on mobile Safari vs. desktop Chrome?谷歌网络字体在移动 Safari 和桌面 Chrome 上的呈现方式不同？
【发布时间】：2020-03-28 15:21:26
【问题描述】：

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>

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

@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;
}

【问题讨论】：

查看font-smooth/-webkit-font-smoothinghere的值
@emsoff 感谢您的建议，但页面上说此属性是非标准的，应该使用。还有其他想法吗？
不幸的是没有。这是唯一的方法，标准与否。另一种选择是不“修复”它，让每个浏览器按照他们决定的方式呈现字体。
如果您需要相同的外观，请使用网络字体，重要的是：不要相信谷歌网络字体。他们的 CSS 包括 local() 首先加载，您应该永远允许。因此，获取他们的 css 链接为您提供的 CSS 文件，取出，然后自己托管那个 CSS，这样您就知道永远不要让操作系统为您选择字体。
@Mike'Pomax'Kamermans 啊没有意识到它甚至涵盖了字体格式！很酷。感谢分享。

标签： html css fonts font-face google-webfonts

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

您好，感谢您的回答。是否可以直接链接到谷歌字体文件而不是自托管它们？
嗨@Crashalot，您可以通过Google Fonts下载Signika
抱歉给您带来了困惑。改写：自托管字体和从谷歌字体链接到字体有什么区别？
它将使字体在所有平台上都具有该字体的确切属性。
事实证明，如果您尝试使用字体不支持的字体粗细，Safari 会更改字体。使用支持的字体粗细或使用normal 作为字体粗细消除了这个问题。

【解决方案3】：

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

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

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

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

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

供参考，

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

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

【讨论】：

终于找到了正确的原因和解决方法！请参阅下面的答案，但 tldr，您需要使用支持的粗细或 normal 作为字体粗细。