为什么我的网站在 Android Chrome 上字体看起来更加平滑？

Question

我正在使用启用了ClearType的Windows 7操作系统。

在我的网站上，我使用了来自Google字体库的“Happy Monkey”字体。

在我的笔记本电脑（最新版本的Google Chrome浏览器）上，它看起来根本没有反锯齿效果，而在我的Nexus 4手机（使用Chrome浏览器）上，它看起来非常平滑，就像在Google字体库网站上一样。

我已经尝试在我的样式表中在下使用font-smooth: auto;，但清晰度仍然不太好。

是否是因为我的笔记本电脑分辨率与手机不同（1366x768，15.6英寸 vs 1280x768，4.7英寸）？

即使我在我的Nexus手机上完全放大，你也看不到任何锯齿状的边缘，它完全是平滑的。

我的字体声明：

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);

body {
    font: 14px 'Happy Monkey';
    font-smooth: auto; // tried with and without this
}

- cantsay

---

你能同时发布你的@font-face声明吗？ - Eric Hotinger

当然，我已经更新了它。 - cantsay

实际上，如果我在我的笔记本电脑上完全放大Chrome，它看起来也还好（仍然不够清晰），但是当缩小时，它又变得很糟糕。如果我在我的Nexus上完全缩小，即使它很小，它看起来仍然完美无缺。 - cantsay

据我所知，Windows字体渲染器呈现出非常“锐利”的边缘，几乎没有抗锯齿效果，而MacOS X则更加“平滑”。我听说有些人拒绝使用Mac只是因为他们不喜欢“模糊、不清晰”的文本外观。这是否可能是Windows和Android之间的类似差异呢？ - Javier

Google Web Fonts目前与Google Chrome不兼容（很讽刺，对吧？）没有我所知道的避免它的方法，除非不使用Google Web Fonts，而只使用自定义font-face声明。请搜索“Google Paul Irish font-face”获取一些适当的教程。 - Michael

Answer 1

简短回答：如果您使用的是Windows 7，则归咎于浏览器；如果您使用的是Windows 8，则归咎于浏览器和显示器。

为什么Google Chrome在Windows 7上看起来很差？

Windows上最新版本的Google Chrome使用GDI，这是一种提供传统文本呈现的API。 GDI依赖于强提示字体（显式指定如何重新塑造字符以使它们看起来更清晰，不那么锯齿状）。 Google的大多数网络字体不太可能提供GDI需要呈现平滑文本的强提示字体。

其次，GDI并不是在大字体尺寸普遍的时代设计的，因此它无法在大字体尺寸下呈现平滑的文本。 即使在已经很好提示的系统字体（例如Arial）中也会发生这种情况。

然而，Android内置的文本渲染器要更好一些。

应该归咎于Google Chrome在Windows上使用旧的API。

替代方案

Internet Explorer 9+和Mozilla Firefox使用Direct2D，这是一种提供更好文本呈现的新图形API。 但是，它仅支持Windows Vista和Windows 7。 您会发现，在Windows XP上，IE和Fx将以更或多或少相同的方式呈现文本，因为该平台上只存在GDI。

更多关于Cleartype Cleartype是一种用于在显示器上平滑文本的多种呈现方法。 GDI使用的Cleartype方法与Direct2D使用的方法大不相同。 为了使事情更加复杂，Direct2D可以模拟GDI中的Cleartype渲染，或者使用Direct2D中默认的Cleartype和GDI中的Cleartype之间的交叉。 网页开发人员无法做太多事情，只能希望浏览器选择适当的方案。 请注意，对于某些人来说，Cleartype可能看起来更平滑，而对于其他人来说，则可能看起来模糊。

Windows 8的问题

好像事情还不够复杂，在Windows 8中，在IE 10和Windows Store应用程序中，Cleartype在水平和垂直轴上都使用灰度反锯齿，而不是亚像素反锯齿。 这是因为在Windows 8中，屏幕更有可能旋转，并且使用亚像素反锯齿会断裂，因为亚像素不再垂直于抗锯齿方向。 由于灰度反锯齿不使用亚像素，因此如果您的显示器像素较大（即低dpi / ppi显示器），则看起来会很糟糕。

但是，这不是Android和iOS所做的吗？

灰度反锯齿确实是Android和iOS使用的方法。 但是，由于这些移动设备具有如此高的dpi屏幕，因此它看起来几乎与亚像素反锯齿提供的效果一样好。

- Henry

Answer 2

这是一个答案，而不是评论，因为它的长度。

话虽如此，目前在Google Chrome中使用Google Fonts字体真是令人头疼。另外，处理字体锯齿化问题通常需要大量测试和研究，以找到适用于目标设备的方法。

以下是一些关于你面临的问题的链接：

• http://blog.webink.com/font-rendering-in-web-browsers-a-find-your-font-adventure/
• http://blog.typekit.com/category/type-rendering/

我找到的解决方案：

• 使用更好的字体。FontSquirrel有几个很棒的字体，它们有多种格式，而不是来自Google Fonts的单一.woff。它们还有webkit starters，甚至为你编写了CSS。

如果您尝试在Chrome中加载字体并想要更好的呈现--请确保将SVG放在声明的顶部。有关更多信息，请参见此处。

• 避免使用自定义字体。可惜，但这是一个解决方案--而且通常情况下，“花哨”的字体并不是真正需要的。

- Eric Hotinger

Answer 3

这确实是由于您的两个设备之间硬件像素密度差异所致。Cleartype只是微软应用于字形形状的扭曲，以隐藏由过大像素产生的齿状效果的花哨名称。它无法完全隐藏它们。典型屏幕像素密度（每英寸96像素）真的太低，无法正确显示文本。在您的Nexus上，密度要高得多，您不会注意到单个像素（我非常确定Google甚至不会费心用类似Cleartype的效果来隐藏它们）。

您可以通过比较以600 dpi和150 dpi打印的相同文本来轻松检查由于像素密度过低而造成的破坏。（屏幕是有点不同的媒介，但并不完全不同）

- nim

---

我考虑过这个问题，但我在我的 Nexus 上截了一张屏幕截图，上传后在我的笔记本电脑上看起来很好。 - cantsay

另一部分是，微软对过低像素密度补偿的实现严重偏向于“锐利”的黑色文本（当您没有足够小的像素时，另一个可能性是模糊的平滑形状）。 - nim

但是即使如此，给Windows一个与你的Nexus具有相同像素密度的屏幕，你会发现结果完全正常。互联网上对于当像素过大时最佳策略的讨论无休止，但即使是最佳策略也只能近似于使用较小像素时的文本渲染质量。如果你对这个主题感兴趣，请查看http://goo.gl/yf3M7或http://antigrain.com/research/font_rasterization/。 - nim