我无法按照在 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 回答
不负相思意
TA贡献1777条经验 获得超10个赞
我明白你的意思，似乎这个字体的最新版本有一些问题，其他人也抱怨过。现在为什么它在谷歌上显示正常？谷歌脚本使用的演示版本可能与他们的字体 CDN 上的版本不同，尽管我不确定
解决方案：
在他们解决问题之前，请使用 Webfont
与你笔中的字体相同的CSS，除了这是一个旧版本，你可以使用像webfont这样的东西将它托管在你自己的服务器上（我相信你知道如何做到这一点，但万一你不知道） fontsquirrel使程序太简单了。
顺便说一句，这是在 Mac 和单独的高清屏幕上
注意： 我注意到字母/单词之间有一点间距，但没有什么不能用一些 CSSletter-spacing或word-spacing
一只甜甜圈
TA贡献1836条经验 获得超5个赞
首先，自 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，就会注意到这一点。
这是我对这个问题的看法，但在解决这个问题的过程中，我还发现有时存在子像素渲染。
- 2 回答
- 0 关注
- 55 浏览
添加回答
举报
0/150
提交
取消