1

Chrome 37 fixed its font rendering issues by supporting DirectWrite on Windows. As a result, text renders much better, as seen in a screenshot of my web app:

Comparison between old and new font rendering

However, note that the stars on the right remain ugly. The stars are ☆ WHITE STAR (U+2606).

I also have ✓ CHECK MARK (U+2713) on my page, and it appears grainy and pixelated: Grainy check mark

When zooming in to 125%, the stars jump from a grainy outline to a smoother shape. The checkmark becomes smooth at 200% page zoom.

The symbols appear fine in Firefox, although the stars look bad in IE11 like in Chrome.

Since Chrome fixed font rendering as seen with the text above, why do the stars and checkmarks appear grainy still? How can I fix this to make them look like they do in Firefox?

4

1 回答 1

4

有多种使用 DirectWrite 的方法。您可以让它决定何时切换到提示字符(这取决于字体告诉它的内容),或者您可以一直强制使用向量,但这需要更多的实现代码,即自定义渲染器。所以简单地“使用” DirectWrite 并不是故事的结局。

我不知道 Chorme 与 IE 相比是如何做到的,但我怀疑星星和复选标记是以“老派”方式呈现的,被暗示了,这就是为什么你在足够大的尺寸后开始看到它们平滑的原因,那时提示关闭。

提示在很大程度上取决于字体。与旧字体相比,较新的 Microsoft 字体的暗示较少。白星没有广泛的字体支持。在较新的 MS 字体中,只有Segoe UI Symbol 支持它。从较旧的版本来看,似乎只有 Arial Unicode 支持它。相同的字体支持观察适用于复选标记字形

在您的示例中,这两个字形可能来自您机器上的一些废话/免费字体(可能是 Chrome 附带的作为后备字体的字体。)如果我将字体强制为 Segoe UI Symbol,那颗星对我来说看起来不错,当然使用 Chrome 37 渲染时,并不比文本差多少:

<p style="font-family:'Segoe UI Symbol'; font-size:12px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'Segoe UI Symbol'; font-size:18px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'Segoe UI Symbol'; font-size:24px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'Segoe UI Symbol'; font-size:30px">&#x2713; This is a &#x2606; paragraph.</p>

在 Chrome 37 中呈现的 Segoe UI

实际上,Arial Unicode 中的复选标记看起来也不错。只有星星有点薄/不稳定。但它与您展示的不同,因此您的甚至不是来自 Arial Unicode。

<p style="font-family:'Arial Unicode MS'; font-size:12px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'Arial Unicode MS'; font-size:18px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'Arial Unicode MS'; font-size:24px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'Arial Unicode MS'; font-size:30px">&#x2713; This is a &#x2606; paragraph.</p>

宋体 MS Unicode

在我的盒子上,如果我选择一种没有复选标记和白星字形的字体,例如

<p style="font-family:'Gabriola'; font-size:30px">&#x2713; This is a &#x2606; paragraph.</p>

然后对于这两个字形,Chorme 回退到 Arial Unicode:

加布里奥拉换人

但我猜你甚至没有安装 Arial Unicode。根据维基百科关于该字体的页面,它只带有 MS Office,而不带有任何基本的 Windows 操作系统。Segoe UI Symbol应该可以在基础 Windows 7 上使用。我猜 Chrome 只会按字母顺序选择第一个包含字形的字体,如果它从特定请求的字体中丢失的话。在我的盒子上,IE11 在最后一行的行为不同;它为MS Mincho 字体中缺少的复选标记和白星字形提供服务,因此输出如下所示:

IE11 替代品

有趣的是,尽管根据我之前链接的那个 MS 页面,MS Mincho 似乎可以广泛使用,但 fileformat.info 并没有提到它。如果我强制 Google Chrome 使用这个 MS Mincho 字体,我肯定会得到你在较小尺寸下得到的糟糕输出:

<p style="font-family:'MS Mincho'; font-size:12px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'MS Mincho'; font-size:18px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'MS Mincho'; font-size:24px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'MS Mincho'; font-size:30px">&#x2713; This is a &#x2606; paragraph.</p>

Chrome 中的 Mincho

因此,对于那些丢失的字形,这似乎是 Chrome 在您的盒子上默认设置的内容。在 IE11 中,MS Mincho 在小尺寸下实际上看起来更好一些,但不是很多:在此处输入图像描述

另一方面,在 Firefox 上,缺失的字形(在 Gabriola 中)由 Segoe UI Symbol 提供,这就是它们看起来不错的原因:

在此处输入图像描述

如果你真的强制 Firefox 使用蹩脚的 MS Mincho 字体,它看起来和 IE11 一样糟糕:

在此处输入图像描述

显然,小尺寸的 MS Mincho(及其兄弟 MS Gothic)的像素化外观是设计使然。我对 CJK 字体的了解还不够,因此我自己对此没有任何看法……可以说不幸的是,它们默认安装在各种 Windows 上。

更奇怪的是,MS 为 MS Mincho 和 MS Gothic 设计的更新的替代品,称为Meiryo,也有这两个字形,但在 IE11 中没有选择它,即使它按字母顺序排列在 MS Mincho 和 MS Gothic 之前(' MS 的名字的一部分。)这是 Meiryo 的样子:

<p style="font-family:'Meiryo'; font-size:12px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'Meiryo'; font-size:18px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'Meiryo'; font-size:24px">&#x2713; This is a &#x2606; paragraph.</p>
<p style="font-family:'Meiryo'; font-size:30px">&#x2713; This is a &#x2606; paragraph.</p>

在此处输入图像描述

Firefox 有一个相当复杂的字体后备算法,其中后备字体列表取决于字形的范围。它从gfxWindowsPlatform.cpp的第 700 行开始给出。对于 2xxx 字形范围,Firefox 被编码为更喜欢 Segoe UI 符号而不是 Arial Unicode。Chromium 可能有类似的东西,虽然我怀疑不太详细。

同样有趣(同时也很奇怪)的是 DirectWrite 本身至少在简单DrawText情况下实现了字体回退,但它的回退(至少对于 Gabriola)也是 Segoe UI Symbol!所以 IE11 和 Chrome 必须做一些定制的事情来让它看起来比 DirectWrite 开箱即用。这是通过简单更改测试字符串修改的 DirectWrite SDK 示例应用程序的屏幕截图:

在此处输入图像描述

如果您想提供自己的字体,如果您无法控制客户端上安装的字体,这确实是确保外观一致的唯一方法,那么您应该查看这样的教程。由于上述不一致的原因,Lonely Planet 的 Ian Feather 等一些专家建议将这些图标切换到 SVG。YMMV 俗话说...

于 2014-09-04T11:28:20.297 回答