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

Question

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

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

在我的笔记本电脑(最新版本的谷歌浏览器)上它看起来根本没有消除锯齿，而在我的 Nexus 4(带 Chrome)上它看起来非常流畅，就像在谷歌字体网站上一样。

我已经在我的样式表中的 body 下尝试了 font-smooth: auto;，但它仍然不是很清楚。

可能是因为我的笔记本电脑的分辨率与我的手机相比(1366x768、15.6"与 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 依赖于强烈提示的字体(明确指定如何 reshape 字符以使它们看起来更清晰且锯齿更少的字体)。来自 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 屏幕，它看起来与亚像素抗锯齿所提供的一样好。