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

如何解决为什么 Alegreya 字体在某些浏览器中无法正确显示？

我使用以下最少的 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。

这里发生了什么？