时间戳

首页 > 解决方案 > 非视网膜显示器上的 HTML 字体渲染问题

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

问题描述

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

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

我更喜欢它在 Google 字体上的外观。在我的网站上，字体在顶部看起来“被切碎”，但我无法弄清楚他们在 HTML 中做了什么以获得不同的渲染。

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

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>

标签： htmlcssfont-faceretina-displaygoogle-fonts

解决方案

我明白你的意思，这个字体的最新版本似乎有一些问题，其他人也抱怨过。现在为什么它在谷歌上呈现得很好？可能是谷歌脚本使用的演示版本与他们的字体 CDN 上的不一样，虽然我不确定

解决方案：

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

在此处输入图像描述

字体与笔中的 CSS 相同，但这是旧版本，您可以使用 webfont 之类的东西将其托管在自己的服务器上（我相信您知道该怎么做，但万一您不知道） fontsquirrel会进行处理死的简单。

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

注意： 我注意到字母/单词之间有一点点间距，但没有什么不能用一些 CSSletter-spacing或word-spacing

推荐阅读