非视网膜显示屏上的 HTML 字体呈现问题
我无法按照在 Google 字体演示网站上呈现的方式在我的网站上呈现 Poppins。
当使用非视网膜显示器时，它会呈现“太薄”，例如，当我在 font.google.com 上查看相同的文本时，T 上的条只有 1 像素高，而不是 1.5 像素高。
我更喜欢它在谷歌字体上的显示方式。在我的网站上，字体看起来在顶部“被切碎”，但我无法弄清楚他们在 HTML 中做了什么以获得不同的渲染。
此 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>
尚方宝剑之说2回答
-
不负相思意
我明白你的意思，似乎这个字体的最新版本有一些问题，其他人也抱怨过。现在为什么它在谷歌上显示正常？谷歌脚本使用的演示版本可能与他们的字体 CDN 上的版本不同，尽管我不确定解决方案：在他们解决问题之前，请使用 Webfont与你笔中的字体相同的CSS，除了这是一个旧版本，你可以使用像webfont这样的东西将它托管在你自己的服务器上（我相信你知道如何做到这一点，但万一你不知道） fontsquirrel使程序太简单了。顺便说一句，这是在 Mac 和单独的高清屏幕上注意： 我注意到字母/单词之间有一点间距，但没有什么不能用一些 CSSletter-spacing或word-spacing -
一只甜甜圈
首先，自 macOS Mojave 以来，Apple 默认禁用了字体平滑功能。这在视网膜显示器上很难注意到，但在非视网膜显示器上很容易注意到。执行defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO并注销基本上可以解决问题。如果没有字体平滑，文本看起来会小一些。第二个问题似乎是谷歌字体的工作方式。当您在 Google Fonts 演示页面上键入预览文本时，您只会加载该给定文本所需的字符 - 这是为了节省带宽，因为您将下载大约 18 种样式。不过字体似乎有点不同。谷歌字体嵌入Poppins 从 Google Fonts 下载，通过 @font-face 手动导入由 Google 构建的字体 从开发者工具上的网络页面下载字体1 和 2 看起来相同。除了字母 T 和 E 之外，3 中的差异几乎不明显。另请注意，在 Google Fonts 演示页面上渲染文本-webkit-font-smoothing: antialiased;通常会使文本看起来更小，也许这就是生成的字体更大一点的原因。如果您缓存了 Poppins 并手动将字体从生成的字体更改为真正的 Poppins，就会注意到这一点。这是我对这个问题的看法，但在解决这个问题的过程中，我还发现有时存在子像素渲染。
随时随地看视频慕课网APP
相关分类
Html5