有多种使用 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">✓ This is a ☆ paragraph.</p>
<p style="font-family:'Segoe UI Symbol'; font-size:18px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'Segoe UI Symbol'; font-size:24px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'Segoe UI Symbol'; font-size:30px">✓ This is a ☆ paragraph.</p>
实际上,Arial Unicode 中的复选标记看起来也不错。只有星星有点薄/不稳定。但它与您展示的不同,因此您的甚至不是来自 Arial Unicode。
<p style="font-family:'Arial Unicode MS'; font-size:12px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'Arial Unicode MS'; font-size:18px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'Arial Unicode MS'; font-size:24px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'Arial Unicode MS'; font-size:30px">✓ This is a ☆ paragraph.</p>
在我的盒子上,如果我选择一种没有复选标记和白星字形的字体,例如
<p style="font-family:'Gabriola'; font-size:30px">✓ This is a ☆ paragraph.</p>
然后对于这两个字形,Chorme 回退到 Arial Unicode:
但我猜你甚至没有安装 Arial Unicode。根据维基百科关于该字体的页面,它只带有 MS Office,而不带有任何基本的 Windows 操作系统。Segoe UI Symbol应该可以在基础 Windows 7 上使用。我猜 Chrome 只会按字母顺序选择第一个包含字形的字体,如果它从特定请求的字体中丢失的话。在我的盒子上,IE11 在最后一行的行为不同;它为MS Mincho 字体中缺少的复选标记和白星字形提供服务,因此输出如下所示:
有趣的是,尽管根据我之前链接的那个 MS 页面,MS Mincho 似乎可以广泛使用,但 fileformat.info 并没有提到它。如果我强制 Google Chrome 使用这个 MS Mincho 字体,我肯定会得到你在较小尺寸下得到的糟糕输出:
<p style="font-family:'MS Mincho'; font-size:12px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'MS Mincho'; font-size:18px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'MS Mincho'; font-size:24px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'MS Mincho'; font-size:30px">✓ This is a ☆ paragraph.</p>
因此,对于那些丢失的字形,这似乎是 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">✓ This is a ☆ paragraph.</p>
<p style="font-family:'Meiryo'; font-size:18px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'Meiryo'; font-size:24px">✓ This is a ☆ paragraph.</p>
<p style="font-family:'Meiryo'; font-size:30px">✓ This is a ☆ 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 俗话说...