Question

我正在使用启用了ClearType的Windows 7。

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

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

我在样式表中font-smooth: auto;下尝试了body，但目前还不是很清楚。

可能是因为笔记本电脑的分辨率与手机相比（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 rending，或者使用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字体使用字体对于Google Chrome来说是一个痛苦。另外，在 general 中处理字体别名需要进行大量测试，这是一种痛苦，通常需要您对目标设备的任何工作进行一些研究。

以下是您遇到的问题的一些链接：

我找到的解决方案：

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

如果您尝试在Chrome中加载字体并希望更好地渲染 - 请务必将SVG放在声明的顶部。有关详细信息，请参阅here。

避免使用自定义字体。很遗憾，但这是一个解决方案 - 而且通常不需要“花哨”字体。

Answer 3

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

通过比较600 dpi和150 dpi打印的相同文本，您可以通过太低的像素密度轻松检查文本造成的残骸。（屏幕有点不同，但没有那么不同）

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

3 个答案: