非视网膜显示器上的HTML字体渲染问题

Question

我无法像在Google字体演示网站上一样在我的网站上渲染Poppins。

[例如，当使用非视网膜显示器时，它会呈现“太薄”的效果，T上的条形只有1px高，而不是当我在font.google.com上看相同的文本时的1.5px高。

我更喜欢Google字体上的外观。在我的网站上，字体的顶部看起来“被切掉”，但我无法弄清楚它们在HTML中正在做什么以得到不同的呈现效果。

This codepen演示了问题，但要注意：您需要非视网膜显示器才能看到问题！

代码：

<html>

<head>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
</head>
<style>
  body {
    margin: 48px;

    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
  }

  main {
    display: grid;
    grid-template-columns: 20% 30% 40%;
    column-gap: 5%;
    align-items: center;
  }

  h2 {
    font-size: 1.2em;
    font-weight: normal;
    align-self: center;
  }

  a {
    color: #000;
  }

  small {
    display: block;
    font-weight: normal;
    font-size: 12px;
  }

  img:first-of-type {
    grid-row-end: span 2;
  }
</style>

<body>
  <h1>⚠️This issue is only visible on non-retina display!</h1>
  <main>
    <h2>
      Browser rendering
    </h2>
    <div>
      TITLE TEXT HERE IS 18<br />
      <small>^^^ T bars will be too thin on non-retina browser</small>
    </div>
    <img src="https://i.imgur.com/7LyzjJy.png" />

    <h2>
      Screenshot of Chrome on MacOS (broken)
    </h2>
    <div>
      <img src="https://i.imgur.com/2OZ0wv6.png" />
      <small>^^^ Notice how the T bar is too thin.</small>
    </div>

    <h2>
      Google Fonts<br />
      (screenshot of Bold 700 on <a href="https://fonts.google.com/specimen/Poppins?preview.text=HTML+TITLE+TEXT+HERE+IS+18&preview.text_type=custom&selection.family=Poppins:wght@400;700&sidebar.open">
        the demo page</a>)
    </h2>
    <div>
      <img src="https://i.imgur.com/dgld0Jw.png" /><br />
      <small>^^^ Notice how the T bars are thicker</small>
    </div>
    <img src="https://i.imgur.com/pQPZ6Ch.png" />
  </main>
</body>

</html>

Answer 1

[第一件事-自macOS Mojave以来，Apple默认已禁用字体平滑。在视网膜显示屏上很难注意到这一点，但是easy to notice on non-Retina。执行defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO并注销通常可以解决该问题。没有字体平滑的文本看起来会小一些。

第二个问题似乎是Google字体的工作方式。当您在Google字体演示页面上键入预览文本时，您将仅加载此给定文本所需的字符-这是为了节省带宽，因为您将要下载大约18种样式。

但是字体似乎有点不同。