在每个浏览器上打开 Sans 看起来都很奇怪答案

【问题标题】：Open Sans looking weird on every browser在每个浏览器上打开 Sans 看起来都很奇怪
【发布时间】：2021-11-19 23:02:54
【问题描述】：

3 天前不知从何而来，我注意到我在使用 Google 字体中的“Open sans”字体作为主要字体之前构建的一些网站在 Chrome 上看起来很奇怪、不稳定且像素化。

我已经尝试了几个修复，从调整 Windows 上的 ClearType 到禁用标志（加速 2d 画布）和禁用 Chrome 上的硬件加速，几乎尝试了我在互联网上找到的所有东西，但没有任何效果。

我还尝试从我的 Windows 字体文件夹中删除“Open sans”，但该字体在我的网站上仍然看起来像素化。在我删除它之前，它在 Photoshop 中很好。

这是我目前看到的截图。

p 标签使用简单的 CSS 进行测试

font-family: 'Open sans';
font-size: 12px; / 20px (on the bellow paragraph)
font-weight: 700; / 400 (on the bellow paragraph)
-webkit-font-smoothing: antialiased;

关于样式，我有默认的@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800; 1,300;1,400;1,500;1,600;1,700;1,800&display=swap');来自谷歌字体。

任何人都可以发光吗？任何帮助表示赞赏。我真的不想仅仅因为这个该死的错误字体而格式化我的电脑。还在 Edge 和 Opera GX 上进行了测试，它们也发生了这种情况。

【问题讨论】：

我可以确认我也看到了这个。有些尺寸比其他尺寸更差 - 在 20 像素处弯曲的大写字母，如 D、C 和 G 完全是一团糟。我无法向看起来如此糟糕的客户发布网站。
是的，数字也很奇怪，我不知道该怎么办
如果有帮助的话，我们最终还是选择了 Roboto，它对于我们的目的来说已经足够相似了。
我希望我能改变，但是我们有将近 700 个站点使用 open sans 作为标准，切换字体的选择是不可行的，但因为这是我的电脑问题（我的同事没有这个渲染问题）我会忘记它...这很烦人但是，我无能为力，尝试了一切
这肯定会发生。我很惊讶网络上的其他地方没有更多关于它的信息，但这是我能找到的唯一提及（所以至少我知道这不仅仅是我们）。谷歌似乎不太可能不知道这一点，但也许他们实际上并不知道。有什么办法让他们知道吗？我无法想象这是故意的或需要解决方法的事情。

标签： css google-chrome fonts google-fonts

【解决方案1】：

你应该确定它是否是开放的。您可以通过whatfont plugin查看它

【讨论】：

安装了插件，是的，它把字体识别为 Open Sans，顺便说一句好插件
你能给我一个链接或演示吗？也许我会发现一个错误。您也可以尝试添加 1-2 像素。我在 font-size: 13px 有类似的错误，但是 font-size: 14px 一切都很好。
这是我在帖子vivarte.com.br/teste.html 上链接为图片的测试，关于字体大小的事情，我有近 700 个平台模型站点，我们用于客户进行在线拍卖，并且菜单文字大小是 12 像素，我真的无法更改它...但我想只有在我的电脑上才有问题，其他人都说网站是正常的，我有点想修复我的问题，但我做了这么多，没有任何效果，我放弃了

【解决方案2】：

我在使用 Google Fonts 的 Open Sans 时也遇到了同样的问题，无论是通过 @import 方法还是 <link> 方法。针对 Brave（版本 1.30.89 Chromium：94.0.4606.81）、Chrome（94.0.4606.71）和 Firefox（93.0）进行了测试。它在 fonts.google.com 演示网站上以 18-20 像素大小显示这种颗粒感，但在 16 像素或 21 像素时不存在问题。

有趣的是，Adobe Fonts 的 Open Sans 版本没有出现此问题，并且在所有尺寸下都清晰且抗锯齿。我将我的 Google 实现换成了 Adobe 的 <link> 实现，但遇到了同样的问题。

但是，检查 Adobe 的演示后发现他们还添加了一个 CSS 属性：font-feature-settings: 'calt', 'clig', 'kern', 'liga', 'locl', 'rlig';。这些是 OpenType 功能，将其添加到我的样式中似乎可以解决问题，但仅适用于 Adobe 实现；它没有解决谷歌版本的问题。也许 Google 的 Open Sans 版本缺少这些附加功能。

【讨论】：

omg，谢谢你，即使从谷歌打开的 sans 对我来说仍然是颗粒状的，使用 adobe 的链接完全没问题，我会切换到 adobe，直到谷歌字体可以让我再次使用。谢谢！

【解决方案3】：

我遇到了类似的问题，即。 Open Sans 在我们的网站上看起来很紧张（正如屏幕截图所示）

按照 cmets 中的建议，当我使用 Adobe 的 Open-Sans 版本时，问题（某种程度上）得到了解决。

最后，我发现在我们的 CSS 中，我们使用的字体粗细 (300) 不是从谷歌字体导入的。

添加后，一切都很顺利，所以我们回到了 Google 字体。

【讨论】：