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

Question

我使用以下最小 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 标签出现并且仅针对网络字体 Alegreya。在普通文本中，它有效。使用另一种字体，它可以工作。在系统上安装 Alegreya 字体后，它也可以工作。它必须作为网络字体下载才能看到错误。

在两台计算机上 Windows 10 上测试。它不适用于 Opera、Edge 和 Chrome。不过，它可以在 IE 和 Firefox 上运行。

这里发生了什么？

Answer 1

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

<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>

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

Why the Alegreya font doesn't display correctly in some browsers?

html

css

webfonts