wpf WPF模糊字体问题-解决方案

WPF Blurry fonts issue- Solutions

提问by Robert Vukovi?

Problem is described and demonstrated on the following links:

问题在以下链接中进行了描述和演示：

• Paul Stovell WPF: Blurry Text Rendering
• www.gamedev.net forum
• Microsoft Connect: WPF text renderer produces badly blurred text on small font sizes

• Paul Stovell WPF：模糊文本渲染
• www.gamedev.net 论坛
• Microsoft Connect：WPF 文本渲染器在小字体上产生严重模糊的文本

Explanation: Text Clarity in WPF. This link has font comparison.

说明：WPF 中的文本清晰度。这个链接有字体比较。

I would like to collect all possible solutions for this problem. Microsoft Expression Blend uses WPF but fonts look readable.

我想收集这个问题的所有可能的解决方案。Microsoft Expression Blend 使用 WPF，但字体看起来可读。

• Dark background as in Microsoft Expression Blend
• Increasing the font size and changing the font (Calibri ... ) [link]
• Embed windows forms [link]
• Use GDI+ and/or Windows Forms TextRenderer class to render text to a bitmap, and then render that bitmap as a WPF control. [link]

• Microsoft Expression Blend 中的深色背景
• 增加字体大小并更改字体（Calibri ...）[链接]
• 嵌入窗体[链接]
• 使用 GDI+ 和/或 Windows 窗体 TextRenderer 类将文本呈现为位图，然后将该位图呈现为 WPF 控件。[关联]

Are there any more solutions?

还有更多的解决方案吗？

This is going to be fixed in VS2010 (and WPF4) beta 2

这将在 VS2010（和 WPF4）beta 2 中修复

IT LOOKS LIKE IT HAS BEEN FINALLY SOLVED !

看起来它已经最终解决了！

Scott Hanselman's ComputerZen.com: WPF and Text Blurriness, now with complete Clarity

Scott Hanselman 的 ComputerZen.com：WPF 和文本模糊，现在完全清晰

采纳答案by David Schmitt

Technical background

技术背景

There is a in-depth article about WPF Text rendering from one of the WPF Text Program Managers on windowsclient.net: Text Clarity in WPF.

windowsclient.net 上的一个 WPF 文本程序管理器有一篇关于 WPF 文本渲染的深入文章：WPF 中的文本清晰度。

The problem boils down to WPF needing a linearly scaling font-renderer for smooth animations. Pure ClearType on the other hand takes quite a bit of freedom with the font to push vertical stems into the next pixel.

问题归结为 WPF 需要线性缩放字体渲染器以实现流畅的动画。另一方面，Pure ClearType 需要相当多的字体自由度来将垂直词干推入下一个像素。

The difference is obvious if one compares the classic "cascade" pattern. WinForms on the lower left side, WPF on the top right side:

如果比较经典的“级联”模式，差异就很明显了。左下角的WinForms，右上角的WPF：

While I'm no fan of WPF's font rendering idiosyncrasies either, I can imagine the clamor if the animations would jump like they do in the Winforms cascade.

虽然我也不喜欢 WPF 的字体渲染特性，但我可以想象如果动画会像在 Winforms 级联中那样跳跃，那会是多么的喧嚣。

Playing with the registry

玩弄注册表

Of special interest to me was the link to the MSDN article "ClearType Registry Settings", which explains the possible user-side adjustments in the registry:

我特别感兴趣的是 MSDN 文章“ ClearType 注册表设置”的链接，它解释了注册表中可能的用户端调整：

• ClearType level: amount of subpixel hinting
• Gamma level
• Pixel structure: how the color stripes in a display-pixel are arranged
• Text contrast level: adjusts the width of glyph stems to make the font heavier

• ClearType 级别：子像素提示的数量
• 伽玛级
• 像素结构：显示像素中的色条如何排列
• 文本对比度级别：调整字形词干的宽度，使字体更重

Playing around with these settings didn't really improve the underlying problem, but can help by reducing the color bleeding effect for sensitive users.

使用这些设置并没有真正改善根本问题，但可以帮助减少敏感用户的颜色渗色效果。

Another approach

另一种方法

The best advice the Text Clarity article gave was increasing the font size and changing the font. Calibri works for me better than the standard Segoe UI. Due to its popularity as web font, I tried Verdana too, but it has a nasty jump in weight between 14pt and 15pt which is very visible when animating the font size.

Text Clarity 文章给出的最佳建议是增加字体大小和更改字体。Calibri 比标准的 Segoe UI 更适合我。由于它作为网络字体的流行，我也尝试过 Verdana，但它的重量在 14pt 和 15pt 之间有一个令人讨厌的跳跃，这在为字体大小设置动画时非常明显。

WPF 4.0

WPF 4.0

WPF 4 will have improved support for influencing the rendering of fonts. There is an article on the WPF Text Blogexplaining the changes. Most prominently, there are now (at least) three different kinds of text rendering:

WPF 4 将改进对影响字体渲染的支持。WPF 文本博客上有一篇文章解释了这些变化。最突出的是，现在（至少）三种不同的文本呈现方式：

_{<grumble>That should be enough rope for every designer.</grumble>}

_{<grumble>这对每个设计师来说应该足够了。</grumble>}

回答by Helge Klein

.NET 4 finally has a solution to WPF's poor text rendering quality, but it is well-hidden. Set the following for every window:

.NET 4 终于有了解决 WPF 糟糕的文本渲染质量的方法，但它隐藏得很好。为每个窗口设置以下内容：

TextOptions.TextFormattingMode="Display"

Default value is "Ideal" which is not at all what the name implies.

默认值为“理想”，这与名称所暗示的完全不同。

There are two other options in TextOptions, namely TextHintingMode and TextRenderingMode, but they both have sensible defaults.

TextOptions 中还有另外两个选项，即 TextHintingMode 和 TextRenderingMode，但它们都有合理的默认值。

回答by Isak Savo

I encountered a problem the other day when I used a border which had a DropShadowEffectapplied. The result was that all text inside that border was extremely blurry. It doesn't matter if text was inside other panels or directly under the border - any text block that is child of parent that has an Effectapplied seems to be affected.

前几天我在使用应用了DropShadowEffect的边框时遇到了一个问题。结果是该边框内的所有文本都非常模糊。文本是在其他面板内还是直接在边框下无关紧要 - 任何应用了Effect的父级子级的文本块似乎都会受到影响。

The solution to this particular case was to not put stuff inside the border that has effects, but instead use a grid (or anything else that supports putting content on top of each other) and place a rectangle in the same cell as the text (i.e. as a sibling in the visual tree) and put the effects on that.

这种特殊情况的解决方案是不要在有效果的边框内放置东西，而是使用网格（或任何其他支持将内容放在彼此之上的东西）并在与文本相同的单元格中放置一个矩形（即作为视觉树中的兄弟）并对其施加影响。

Like so:

像这样：

<!-- don't do this --->
<Border>
     <Border.Effect>
          <DropShadowEffect BlurRadius="25" ShadowDepth="0" Opacity="1"/>
     </Border.Effect>
     <TextBlock Text="This Text Will Be Blurry" />
</Border>

<!-- Do this instead -->
<Grid>
  <Rectangle>
     <Rectangle.Effect>
          <DropShadowEffect BlurRadius="25" ShadowDepth="0" Opacity="1"/>
     </Rectangle.Effect>
  </Rectangle>
  <TextBlock Text="This Text Will Be Crisp and Clear" />
</Grid>

回答by Pavel Minaev

This is going to be fixed in VS2010 (and WPF4) beta 2:

这将在 VS2010（和 WPF4）beta 2 中修复：

回答by Pavel Minaev

SnapToDevicePixels only applies to WPF shapes (lines etc), not to text renderer.

SnapToDevicePixels 仅适用于 WPF 形状（线条等），不适用于文本渲染器。

There is no known workaround to this issue. According to Microsoft, the behavior is "by design".

此问题没有已知的解决方法。据微软称，这种行为是“设计使然”。

Also see thisthread on Microsoft forums discussing the problems - it has gotten a few replies from MS guys which clarify their position on the issue.

另请参阅此微软论坛中讨论的问题线程-它从MS球员这阐明他们对这一问题的立场得到一些回复。

回答by Pavel Minaev

From a developer's point, the only known "workaround" to date is to use GDI+ and/or Windows Forms TextRenderer class to render text to a bitmap, and then render that bitmap as a WPF control. Aside from obvious performance implications, this doesn't alleviate the problem for existing applications.

从开发人员的角度来看，迄今为止唯一已知的“解决方法”是使用 GDI+ 和/或 Windows 窗体 TextRenderer 类将文本呈现为位图，然后将该位图呈现为 WPF 控件。除了明显的性能影响之外，这并不能缓解现有应用程序的问题。

I have now created a Microsoft Connect ticket for this issue(to my surprise, despite all the negativity, there was no actual bug report in the designated tracker).

我现在已经为此问题创建了Microsoft Connect 票证（令我惊讶的是，尽管存在所有负面影响，但指定的跟踪器中没有实际的错误报告）。

Since that is one of the official channels of communicating requests and questions to Microsoft, I would advise also going through it for a quicker answer. At least, if you wish for the issue to be addressed one way or another, voting for that ticket there and/or validating the issue will help to draw the attention of Microsoft PMs and engineers to this problem, and possibly raise its perceived priority.

由于这是向 Microsoft 传达请求和问题的官方渠道之一，因此我建议您也通过该渠道获得更快的答复。至少，如果您希望以一种或另一种方式解决该问题，那么在该票证上投票和/或验证该问题将有助于引起 Microsoft PM 和工程师对该问题的注意，并可能提高其感知的优先级。

回答by Gabriel

I don't see it as a bug, but the default configuration is indeed very annoying. Here's a comparision of all the combinations of

我不认为这是一个错误，但默认配置确实很烦人。这是所有组合的比较

TextOptions.TextRenderingMode
TextOptions.TextFormattingMode
RenderOptions.ClearTypeHint

SnapToDevicePixelsdoesn't make any differente in text rendering.

SnapToDevicePixels在文本渲染中没有任何区别。

I prefer:

我更喜欢：

TextOptions.TextRenderingMode="Auto"
TextOptions.TextFormattingMode="Ideal"
RenderOptions.ClearTypeHint="Auto"

where vertical lines are never blurry.

垂直线永远不会模糊。

The font used is Open Sans Light, that can be really beautifull if it's well used, like in latest TeamViewer.

使用的字体是 Open Sans Light，如果使用得当，它会非常漂亮，就像在最新的 TeamViewer 中一样。

For those using Mahapps.Metro, the problem is the TransitioningContentControlhttps://github.com/MahApps/MahApps.Metro/issues/889

对于那些使用 Mahapps.Metro 的人，问题是TransitioningContentControlhttps://github.com/MahApps/MahApps.Metro/issues/889

回答by Orion Edwards

Just tried out VS2010 beta, which is all done in WPF, and it suffers BADLY from the blurry-font issue. Particularly on tooltips.

刚刚试用了 VS2010 测试版，所有这些都是在 WPF 中完成的，并且它遭受了字体模糊问题的严重影响。特别是在工具提示上。

That seems to give some evidence that WPF4 will in fact not solve the problem (if anything it looks worse)

这似乎提供了一些证据表明 WPF4 实际上不会解决问题（如果有的话看起来更糟）

回答by VVS

Wow, I can't believe I finally got my WPF fonts readable. And I also can't believe there is no option dialog to make these changes easy while the default values are horrible on my display.

哇，我简直不敢相信我终于让我的 WPF 字体可读了。而且我也不敢相信没有选项对话框可以使这些更改变得容易，而默认值在我的显示器上却很糟糕。

These registry settings(in decimal) worked for me and come closest to my regular cleartype font:

这些注册表设置（十进制）对我有用，最接近我的常规 cleartype 字体：

• ClearTypeLevel: 10 (mostly greyscale aliasing)
• GammaLevel: 1300 (higher gamma made the font too thin and I was seeing the colors in the aliasing)

• ClearTypeLevel：10（主要是灰度混叠）
• GammaLevel：1300（更高的伽马使字体太薄，我看到了锯齿中的颜色）

回答by Inisheer

They say "SnapToDevicePixels = true" works, but I've never seen any good results.

他们说“SnapToDevicePixels = true”有效，但我从未见过任何好的结果。

I combat the blurred text by switching to a different font.

我通过切换到不同的字体来对抗模糊的文本。

Obviously this is not a solution to the problem, however this is how I've worked around it.

显然，这不是问题的解决方案，但这就是我解决它的方式。