为什么 Alegreya 字体在某些浏览器中无法正确显示？答案

【问题标题】：Why the Alegreya font doesn't display correctly in some browsers?为什么 Alegreya 字体在某些浏览器中无法正确显示？
【发布时间】：2021-09-05 09:09:45
【问题描述】：

我使用以下最少的 HTML 代码来重现问题：

<html>

<body>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Alegreya&display=swap" rel="stylesheet">

  <style>
    body {
      font-family: "Alegreya"
    }
  </style>

  <h1>Testing the web font Alegreya</h1>
  Testing the web font Alegreya
</body>

</html>

文档显示如下：

如您所见，一些字母周围有一个奇怪的轮廓。此行为仅出现在 H1 标签和中，仅适用于 webfont Alegreya。在普通文本中，它可以工作。使用另一种字体，它可以工作。在系统上安装 Alegreya 字体后，它也可以工作。必须将其作为 webfont 下载才能看到错误。

在 Windows 10 的两台计算机上测试。它不适用于 Opera、Edge 和 Chrome。它确实在 IE 和 Firefox 上运行。

这里发生了什么？

【问题讨论】：

使用 Chrome 91.0.4472.114 在 Linux 上渲染也有点“浑浊”。如果问题存在于 Opera、Edge 和 Chrome 中，则闻起来像是 Blink 搞乱了字体渲染。（它们基本上都是 Chromium 浏览器）
是的，甚至更好，如果有人使用 Chrome 在页面中运行您的示例，然后放大和缩小页面，不同的字母会中断或正常工作。它们以一种让人想起 SVG 编辑器中糟糕工作的结果的方式搞砸了。在做 svgs 时，纯黑色文本不应该有轮廓 - 它应该没有轮廓和纯色填充。这种字体似乎有同样的废话..
我也这么认为。但为什么只针对 H1 标签？放大普通文本时，不会出现失真...
@Stamm - 不是。将您的代码复制到新答案，将其更改为使用 H2 标签 - 仍然会发生。也许有专门用于 Hnn 标签的字体副本。
@Stamm - 刚刚尝试将文本放入 div 并将字体大小设置为 96px。没有更多搞砸的轮廓。 ;)

标签： html css webfonts

【解决方案1】：

我遇到了同样的问题。它似乎与应用的字体粗细有关。我通过明确指定要在 URL 中加载的字体粗细来修复它。见下面的代码 sn-p。

<html>

<body>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&display=swap" rel="stylesheet">

  <style>
    body {
      font-family: "Alegreya"
    }
  </style>

  <h1>Testing the web font Alegreya</h1>
  Testing the web font Alegreya
</body>

</html>

【讨论】：

是的，它有效！非常感谢！