【发布时间】：2020-04-01 00:30:39
【问题描述】：
我无法像在 Google 字体演示网站上那样在我的网站上渲染 Poppins。
当使用非视网膜显示器时，它会呈现“太薄”，例如，当我在 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>【问题讨论】：
-
它似乎对我来说很好imgur.com/QtDwjKm，哎呀，编辑：我刚刚注意到您现在可能解决问题的日期，想评论一下问题是什么？
-
不，问题没有解决。你需要在非视网膜显示器上查看问题，我被告知它在 Windows 上运行良好，所以这可能是一个仅限 mac 的问题，但我还没有确认这一点。
-
我在使用 macbook pro，屏幕截图来自我使用 chrome 的第二个 viewsonic 高清显示器，仍然不确定这是否与您在高清屏幕上看到的输出相似，对我来说好像还可以
-
是的，我同意。你的截图看起来不错。如果你打开我在问题中链接的代码笔，你能看到问题吗？
-
不一样 imgur.com/d4HRgWq 您是否在浏览器中设置了任何标志（已编辑默认浏览器设置）？不同的浏览器会出现同样的问题吗？
标签： html css font-face retina-display google-fonts