Chrome 37 DirectWrite固定文字渲染，但特殊字符仍然呈现颗粒状
Chrome 37 fixed通过在Windows上支持DirectWrite来解决其字体呈现问题。因此，文本呈现得更好，如我的网络应用程序的屏幕截图所示：
然而，请注意右边的星星仍然很难看。星星是☆WHITE STAR (U+2606)。
我的页面上还有✓CHECK MARK (U+2713)，看起来有颗粒感和像素化：
当放大到125％时，星星从颗粒状轮廓跳跃到更平滑的形状。选中标记在200％页面缩放时变得平滑。
这些符号在Firefox中看起来不错，尽管IE11中的星星在Chrome中看起来很糟糕。
由于Chrome固定字体呈现与上面的文字一样，为什么星星和复选标记仍然呈现颗粒状？我如何解决这个问题，使它们看起来像在Firefox中一样？
1 个答案:
答案 0 :(得分：4)
有几种方法可以使用DirectWrite。您可以让它决定何时切换到提示字符（这取决于字体告诉它的内容），或者您可以一直强制向量，但这需要更多的实现代码，即custom renderer。如此简单＆＃34;使用＆＃34; DirectWrite不是故事的结尾。
我不知道Chorme对IE的影响，但我怀疑明星和复选标记是在＃34;旧学校＆＃34;方式，被暗示，这就是为什么你开始看到它们在足够大的尺寸后平滑，然后暗示关闭。
提示严重依赖于字体。较新的Microsoft字体的暗示程度低于旧字体。白星没有广泛的字体支持。在较新的MS字体中，只有Segoe UI Symbol supports it。从旧的，只有Arial Unicode似乎支持它。相同的字体支持观察applies to the checkmark glyph。
在你的例子中，这两个字形可能来自你机器上的一些废话/免费字体（可能是Chrome附带的后备字体。）如果我强制将字体转换为Segoe UI符号，那么这个明星看起来相当不错当使用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。根据{{3}}，它只附带MS Office，而不是任何基本的Windows操作系统。 Segoe UI符号Wikipedia's page on that font。我猜Chrome只是按字母顺序选择第一个字体，如果字体特定请求的字体丢失，则包含该字形。在我的方框中，IE11在最后一行表现不同;它提供should be available on base Windows 7 though中缺少的复选标记和白星字形，因此输出如下：
有趣的是，尽管MS Mincho似乎可以根据之前链接的MS页面广泛使用，但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默认为你的盒子上缺少的字形。在小尺寸下，MS Mincho实际上看起来好一点，但在IE11中并没有那么多：
另一方面，在Firefox上，丢失的字形（在Gabriola中）从Segoe UI Symbol获得，这就是为什么它们看起来很好：
如果你真的强迫Firefox使用蹩脚的MS Mincho字体，它看起来和IE11一样糟糕：
显然，MS Mincho（和它的兄弟MS Gothic）的小尺寸的像素化外观是MS Mincho font。我不太了解CJK字体对我自己有任何意见......我们很遗憾地说它们默认安装在各种各样的Windows上。
更奇怪的是，MS为MS Mincho和MS Gothic设计的更新的替代品（称为somehow by design）也有这两个字形，但它在IE11中没有被选中，即使在MS Mincho和MS Gothic（＆＃39; MS＆＃39;名称的一部分）之前按字母顺序排列。这是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有一个相当复杂的字体后备算法，其中后备字体列表取决于字形的范围。它是在Meiryo的第700行开始给出的。对于2xxx字形范围，Firefox编码为优先于Arial Unicode的Segoe UI符号。 Chromium可能有类似的东西，虽然我怀疑不那么复杂。
同样有趣（同时又奇怪）的是，DirectWrite本身至少为简单DrawText案例实现了字体回退，但其后备（至少对于Gabriola）也是Segoe UI符号！所以IE11和Chrome必须做一些自定义的事情，以使它看起来比DirectWrite开箱即用。这是通过简单地更改测试字符串修改的DirectWrite SDK示例应用程序的屏幕截图：
如果您想提供自己的字体，如果您无法控制客户端上安装的字体，这是确保外观一致的唯一方法，那么您应该查看gfxWindowsPlatform.cpp。出于不一致的原因，像Lonely Planet的Ian Feather这样的专家推荐a tutorial like this one。 YMMV俗话说...
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？