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

Question

我无法像在 Google 字体演示网站上那样在我的网站上呈现 Poppins。

当使用非视网膜显示器时，它呈现 "too thin"，例如，当我在 [=34= 上查看相同的文本时，T 上的条只有 1px 高，而不是 1.5px 高].

我更喜欢它在 Google 字体上的外观。在我的网站上，字体看起来 "chopped" 在顶部，但我无法弄清楚他们在 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 默认禁用字体平滑。这在 Retina 显示器上很难注意到，但是 easy to notice on non-Retina。执行 defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO 并注销主要可以解决问题。没有字体平滑文本看起来有点小。

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

但是字体似乎有点不同。

Google 字体嵌入
从 Google 字体下载的 Poppins，通过 @font-face
字体由Google从开发者工具上的网络页面下载的字体构建

1 和 2 看起来一模一样。除了字母 T 和 E 之外，3 中的差异几乎不明显。

另请注意，在 Google 字体演示页面上，文本使用 -webkit-font-smoothing: antialiased; 呈现，这通常会使文本看起来有点小，也许这就是生成的字体有点大的原因。

如果您缓存了 Poppins 并手动将字体从生成的字体更改为真正的 Poppins，就会注意到这一点。

这是我对这个问题的看法，但在解决这个问题的过程中，我还发现有时会出现亚像素渲染。

Answer 2

我明白你的意思，这个字体的最新版本似乎有一些问题，其他人也抱怨过。现在为什么它在 google 上可以正常显示？可能是演示版本 google 脚本使用的与他们的字体 CDN 上的版本不同，但我不确定

解法：

在他们解决问题之前，请使用 Webfont

与您笔中的字体相同CSS 除了这是一个 older version，您可以将其托管在您自己的服务器上使用类似 webfont 的东西（我相信你知道该怎么做，但以防你不知道） fontsquirrel 使程序变得非常简单。

顺便说一句，这是在 mac 和单独的高清屏幕上

注：我注意到 letters/words 之间有一点间距，但没有无法用 CSS letter-spacing 或 word-spacing

修复

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

HTML font rendering issue on non-retina display

html

css

font-face

retina-display

google-fonts