Web 字体仅在 Firefox 中看起来不连贯

Posted 2023-03-06

【中文标题】Web 字体仅在 Firefox 中看起来不连贯

【英文标题】：Web fonts look choppy in Firefox only

【发布时间】：2013-10-17 06:00:59

【问题描述】：

操作系统：Win 7 64 位 浏览器：FF 24.0

如果我去http://www.google.com/fonts，它看起来很糟糕：

当我在本地为我的网站加载一个时，它看起来同样糟糕，但这是我从下面的 fontsquirrel 生成的配置：

    @font-face 
        font-family: 'SecretSans';
        src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot');
        src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot?#iefix') format('embedded-opentype'),
             url('<%=domain_url%>/fonts/secretsansextralight-webfont.svg#secretsansttextralight') format('svg'),
             url('<%=domain_url%>/fonts/secretsansextralight-webfont.woff') format('woff'),
             url('<%=domain_url%>/fonts/secretsansextralight-webfont.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    

因为它在上面的网站和我自己的网站上看起来一样糟糕，我认为这是 Firefox 和/或 Windows 的问题。

是否有适用于访问我网站的所有用户的修复/配置，不需要他们更改 Firefox 或 Windows 中的任何设置，因为这显然是不现实的。

EDIT1：我刚去了控制面板>字体>调整 ClearType 文本，现在它在 Firefox 中正确呈现...虽然我不能要求用户这样做，所以我希望有另一种方法

【问题讨论】：

奇怪，当我使用 Firefox 查看链接时，文本呈现得很好。也许尝试重新安装？还有其他可以测试的机器吗？

您能否检查控制面板> 字体> 调整ClearType 文本，看看它是否已打开。我怀疑这就是为什么它看起来很适合你。

确实开启了

安装（Service Pack 1）对我来说有帮助（Windows 7 - 64 位）。

如果您不讨厌您的访问者，请使用 Arial，它适用于 cleartype 和非 cleartype。大多数字体设计为仅在启用 cleartype 时才能正常工作，否则会导致眼癌。从 Windows XP+ 开始，除非您通过注册表和 cleartype 调谐器完全禁用 cleartype，否则无论您是否愿意，都存在使所有字体 cleartype 的错误。伤痕累累，没有简单的方法可以检查访问您的内容的客户是否有cleartype，而猜错意味着他们会对您的内容印象不佳

【参考方案1】：

我很确定这就是浏览器呈现它的方式。尤其是@font-face 的东西（我假设你使用http://www.fontsquirrel.com/ 或类似的网站来生成它）。您可以使用一点文本阴影使其更清晰一点，但从您所展示的内容来看，我认为您最好尝试找到另一种渲染效果更好的非常相似的字体。

【讨论】：

我用旧版本的 FF(13) 进行了同事测试，它实际上为他正确渲染。这让我觉得可能有办法以某种方式为更高版本的 FF 修复它。因此，我很可能不必使用自定义字体，但如果我可以通过某种理想的配置轻松避免它。

【参考方案2】：

这显然是因为您关闭了 ClearType。这是用于平滑计算机屏幕 (LCD) 上字体边缘的方法。它与网页中使用的附加方法无关，这是严格的字体渲染问题。字体可能因系统而异，因为每种字体的渲染方法略有不同——它们在 Apple 系统上往往看起来最好，而 Windows 似乎有某种较差的渲染方法。这完全取决于正在运行的系统，因此字体将为不同的用户呈现不同的效果。此外，来自大型铸造厂的专业字体通常比免费的开放字体渲染得好得多，因为它们经过专门纠正以优化它们在屏幕上的呈现方式，尤其是当它们被呈现为小（低于 20 像素大小）时，所以谷歌字体集字体的粗糙度也可能部分是因为它们没有像那些专业的、昂贵的字体那样精心制作。然而，无论字体质量如何，如果字体平滑关闭（或不支持），文本总是看起来更丑陋和不连贯，所以你无能为力。阻止自己使用自定义网络字体，因为您担心关闭字体平滑的用户比例会完全阻止您使用它们。

【参考方案3】：

我知道这个帖子来自石器时代，但不幸的是问题仍然存在。如果你用谷歌搜索字体不连贯的问题，它会排在前 10 位；所以我想添加我的 10 美分体验！

好的：如果您在 Google 上搜索 Vista/Win 7/Win 8 下的字体问题，您会发现在很多情况下都与 ClearType 相关的两大类问题。不是全部！但是很多。

---

第 1 组：模糊 Windows 字体

如果我们谈论“Windows 字体”，我们指的是用户界面（菜单等），以及 Word 或 Excel 等办公应用程序的“工作区”。 这个问题困扰着几乎所有不拥有支持高清的 16:9 宽屏显示器的人，尤其是。 19" 和 1280x1024 分辨率的经典办公型显示器。这里的关键字是“Low-DPI”。

对于那些不知道的人：ClearType 在这些低 DPI 显示器上做了可怕的工作，并以如此模糊的方式渲染整个界面，以至于试图使用它会导致严重的眼睛疲劳和头痛。真的，伙计们，它会让你患上眼癌！ （不，您不能在全高清显示器上重新创建该问题！）

唯一的出路是禁用 ClearType。这对第 1 组的几乎所有人都有帮助，包括我。

---

第 2 组：Firefox 和 Chrome 中的字体呈现不稳定（很少使用 MSIE）

在很多很多情况下——比如在这个线程中——ClearType 被禁用。重新启用后，浏览器确实可以很好地呈现字体。对我来说也是如此！

---

不幸的是...当我重新启用 ClearType 时，我又回到了第 1 组！！！

所以：要么我禁用了 ClearType，要么我可以在清晰的 Windows 上工作几个小时而不会感到眼睛疲劳 - 但是我必须忍受 FF 和 Chrome 中的网络字体不连贯。

或者我重新启用 ClearType 以查看设计师为他们非常时尚的网站选择的漂亮而漂亮的字体 - 并且忍受 Windows 因字体模糊而给我带来的头痛！ :-(

显然，我要走第一种路。 如果我偶然发现一个字体看起来像坏了的网站，我只需单击一下鼠标就可以切换 webfonts 的使用 - 有一个很棒的 FF-AddOn。

哦，我忘了：为什么似乎 MSIE 可以很好地渲染字体？

嗯，IE（至少 10 和 11 据我所知）总是使用 ClearType 来呈现页面 - 无论是否在系统设置中禁用。 当然，它也显示了字体模糊的问题——让我想起了为什么我禁用了 ClearType。并且会顺其自然！

最后的想法： 程序员相信 webfonts 是他们所有设计需求的最终解决方案，他们认为，通过在几个默认系统上测试他们的东西，他们可以控制一切。事实上，webfonts 只是让一个众所周知的问题变得无法控制——因为没有像默认用户这样的东西！

想一想。

【讨论】：

不幸的是，这个解决方案并不适用于所有人，但是在过去的几年里，在各种计算机上出现这个问题后，我意识到我在“第 2 组”中，这立即修复了问题（对我来说，字体呈现不连贯仅在 Firefox 上）。现在我感觉自己就像是没有意识到 ClearType 已经关闭了。谢谢！