3

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

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

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

我已经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
}
4

3 回答 3

5

简短的回答：如果您使用的是 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 Store Apps 中，Cleartype 在水平轴和垂直轴上都使用灰度抗锯齿而不是亚像素锯齿。这是因为在 Windows 8 中，屏幕更容易旋转，并且使用子像素抗锯齿会中断，因为子像素不再垂直于抗锯齿方向。由于灰度抗锯齿不使用子像素，因此如果您的显示器上的像素很大（即低 dpi/ppi 显示器），它看起来很糟糕。

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

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

于 2013-09-18T19:29:58.547 回答
1

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

话虽如此，通过谷歌字体使用字体现在对谷歌浏览器来说是一件痛苦的事。另外，处理字体混叠通常需要大量测试，而且很痛苦，通常需要您对适合目标设备的任何东西进行一些研究。

以下是有关您面临的问题的一些链接：

我找到的解决方案：

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

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

  • 避免使用自定义字体。很遗憾，但这是一个解决方案——而且很多时候“花哨”的字体并不是真正需要的。
于 2013-09-18T17:47:56.397 回答
0

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

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

于 2013-09-19T13:30:30.150 回答