为什么我网站上的字体在 Chrome for Android 上看起来更流畅？

Question

我使用的是启用了 ClearType 的 Windows 7。

在我的网站上，我使用的是 Google Fonts 中的“Happy Monkey”字体。

在我的笔记本电脑（最新版本的 Google Chrome）上，它看起来根本没有抗锯齿功能，而在我的 Nexus 4（带有 Chrome）上，它看起来非常流畅，就像在 Google Fonts 网站上一样。

我已经在样式表中的body 下尝试了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
}

Answer 1

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

为什么 Windows 7 上的 Google Chrome 看起来很糟糕

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 上受支持。您会发现 IE 和 Fx 在 Windows XP 上呈现的文本或多或少相同，因为该平台上仅存在 GDI。

有关 Cleartype 的更多信息

Cleartype 是指在显示器上平滑文本的多种渲染方法。 GDI 使用的 Cleartype 方法与 Direct2D 使用的方法大不相同。更复杂的是，Direct2D 可以模拟 GDI 中的 Cleartype 渲染，或者使用 Direct2D 中的默认 Cleartype 和 GDI 中的 Cleartype 的交叉。 Web 开发人员无能为力，只能希望浏览器选择合适的选择。但是请注意，对于一种 Cleartype 来说，它可能看起来更平滑，而对于另一些人来说，它可能会觉得它看起来很模糊。

Windows 8 的问题

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

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

灰度抗锯齿确实是 Android 和 iOS 采用的方法。但由于这些移动设备具有如此高 dpi 的屏幕，因此看起来与亚像素抗锯齿功能一样好。

Answer 2

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

话虽如此，通过 Google Fonts 使用字体现在对于 Google Chrome 来说是一种痛苦。另外，在general 中处理字体别名需要大量测试，而且通常需要您对适合目标设备的任何东西进行一些研究。

以下是您所面临问题的一​​些链接：

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

我找到的解决方案：

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

如果您尝试在 Chrome 中加载字体并希望获得更好的渲染效果，请务必将 SVG 放在声明的顶部。请参阅here 了解更多信息。

• 避免使用自定义字体。很遗憾，但它是一种解决方案——而且很多时候“花哨”字体并不是真正需要的。

Answer 3

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

您可以通过比较以 60​​0 dpi 和 150 dpi 打印的相同文本，轻松检查像素密度过低对文本造成的破坏。 （屏幕是有点不同的媒介，但没有那么不同）