Windows (Firefox/Chrome) 上的字体在任何浏览器中都显示为像素化答案

【问题标题】：Fonts on Windows (Firefox/Chrome) showing up pixelated in any browserWindows (Firefox/Chrome) 上的字体在任何浏览器中都显示为像素化
【发布时间】：2011-11-18 03:42:07
【问题描述】：

我遇到了一个应用程序问题，当我在 Windows 中测试时，字体会显得非常模糊和像素化。

我的字体系列很简单：

body {  
  font-family: Helvetica, Arial, sans-serif;

这是一个例子：

在我的开发机器上，我完全没有问题（Ubuntu/Firefox/Chrome）。

我对 CSS 还很陌生——这可能是操作系统的问题吗？ Windows 机器应该有 Arial，但它不应该吗？

【问题讨论】：

这个例子应该是模糊的吗？因为它在我看来很好。也许多年的 Windows 让我对字体应该看起来的方式视而不见。
如果你看一下 o、u、s 和 e 上的曲线，它是最明显的。在你的显示器上，你的分辨率可能比我的高 - 放大它应该很明显，但也许这是常态？
什么版本的 Windows？

标签： css fonts

【解决方案1】：

这就是 ClearType 呈现字体的方式。这是完全正常的，所以我对您的唯一建议是不要担心它或选择不同的字体。 Windows 用户可能已经习惯了。

这是因为 ClearType 针对较小文本的阅读进行了优化，但结果是它使较大的文本看起来像您的示例中那样像素化。 Here 是一篇更深入地探讨该主题的文章，如果您有兴趣的话。

事实上，如果你禁用 ClearType，我敢打赌它看起来会好很多（虽然较小的文本看起来很糟糕）。

编辑：截至 2013 年 9 月，大多数浏览器（包括 Firefox、Chrome 和 IE10，我相信）在 Windows 上使用自己的字体渲染引擎，因此这应该不再是问题。

【讨论】：

这是 ClearType 的一个已知问题，最终在 IE9 和 WPF 3 中得到纠正，并且可能会开始在 Windows 8 中显示系统范围。标准渲染模式，这是 Windows 上 ClearType 之外的另一个选项XP（不确定 Vista 和 7），是你得到的更大的字体看起来更好。啊，微软……
@BoltClock：我认为这不是问题，只是设计决定。但很高兴知道它已得到改进。
这应该更新。自 2012 年起，Chrome 不再使用 Microsoft ClearType 来呈现文本，因此，大字体出现了严重的别名。查看这个 Dabblet 并比较 I.E. 的差异。和铬：dabblet.com/gist/4276879

【解决方案2】：

许多 Windows XP 系统都关闭了字体平滑功能。我真的不知道为什么，但是如果您打开监视器属性，您可以启用它。然后字体会看起来更好。

当您使用像 Arial 这样的标准 Windows 字体时，问题并不明显，但如果您开始使用 webfonts，它会变得非常难看。

遗憾的是，您无法从浏览器中检测到此设置或强制启用字体平滑

【讨论】：

【解决方案3】：

看起来默认的 windows 字体正确渲染可能会尝试 garamond 或 times new roman，但我认为一旦你达到一定的 windows 大小，你就会遇到像这样的像素化。

【讨论】：

【解决方案4】：

在 Windows 10 和 Chrome 组合上，我遇到了类似的问题，这就是为我解决的问题：

从 Windows 选项中打开 CleanType Text。
在 chrome://flags 上禁用画布的 2D 加速。

【讨论】：

【解决方案5】：

我的网站上的徽标看起来像像素化一样，我也遇到了同样的问题。我尝试了 .jpg 和 .gif 文件。然后，我将文件保存在 Photoshop 的下拉菜单中的“保存为 Web 和设备”中，现在它在网站上看起来很棒。

【讨论】：

字体不是图像，您看到的问题与这里提到的字体问题完全不同，与 ClearType、CSS 或操作系统无关。