我在我的网站上呈现 Poppins 时遇到了问题，就像它在 Google 字体演示网站上呈现的方式一样。
当使用非视网膜显示器时，它会呈现“太薄”，例如，当我在 font.google.com 上查看相同的文本时，T 上的条只有 1 像素高，而不是 1.5 像素高。
我更喜欢它在 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>最佳答案
我明白你的意思了， 似乎该字体的最新版本存在一些问题，其他人也提示过。 现在为什么它在谷歌上显示正常？谷歌脚本使用的演示版本可能与他们的字体 CDN 上的版本不同，尽管我不确定
解决方案:
在他们解决问题之前，请使用 Webfont
与你笔中的字体相同的CSS 除了这是一个 older version ，您可以将其托管在您自己的服务器上 使用像 webfont 这样的东西(我相信你知道怎么做，但以防万一你不知道) fontsquirrel使过程变得非常简单。
顺便说一句，这是在 Mac 和单独的高清屏幕上
注意:
我注意到字母/单词之间有一点间距，但没有什么
无法通过某些 CSS letter-spacing 或 word-spacing
关于非视网膜显示屏上的 HTML 字体渲染问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60961935/