WPF 모호한 글꼴 문제-솔루션


153

다음 링크에서 문제점을 설명하고 설명합니다.

설명 : WPF의 텍스트 선명도 . 이 링크에는 글꼴 비교가 있습니다.

이 문제에 대한 가능한 모든 솔루션을 수집하고 싶습니다. Microsoft Expression Blend는 WPF를 사용하지만 글꼴을 읽을 수 있습니다.

  • Microsoft Expression Blend에서와 같이 어두운 배경
  • 글꼴 크기 늘리기 및 글꼴 변경 (Calibri ...) [link]
  • 창 형태 포함 [link]
  • GDI + 및 / 또는 Windows Forms TextRenderer 클래스를 사용하여 텍스트를 비트 맵으로 렌더링 한 다음 해당 비트 맵을 WPF 컨트롤로 렌더링하십시오. [링크]

더 이상의 해결책이 있습니까?

이것은 VS2010 (및 WPF4) 베타 2에서 수정 될 예정입니다.

IT가 마지막으로 해결 된 것처럼 보입니다!

Scott Hanselman의 ComputerZen.com : 완벽한 선명도를 갖춘 WPF 및 텍스트 흐림


VS2010RC를 사용할 수 없습니다 mpdreamz.nl/vs2010RC-blur.png
— Martijn Laarman

내 컴퓨터의 VS2010RC가 사진에서 훨씬 더 좋아 보입니다. 실제로 흰색 배경은 매우 좋지만 여전히 어두운 배경으로 짜증납니다.
— Robert Vuković

이 문제에 대한 해결책을 찾았어요, 사실 난 내 응용 프로그램에서 여기에 같은 문제가 내가 VS2010와 WPF 3.5을 사용하고 있습니다
— SharpUrBrain

마지막 3 개의 링크가 죽었습니다.
— 신재국

답변:


107

기술적 배경

windowsclient.net의 WPF 텍스트 프로그램 관리자 중 하나에서 WPF 텍스트 렌더링에 대한 자세한 기사가 있습니다. WPF의 텍스트 선명도 .

문제는 부드러운 애니메이션을 위해 선형 스케일링 글꼴 렌더링이 필요한 WPF로 귀결됩니다. 반면에 Pure ClearType은 글꼴을 사용하여 세로 줄기를 다음 픽셀로 밀어 넣는 데 약간의 자유가 필요합니다.

고전적인 "캐스케이드"패턴을 비교하면 차이가 분명합니다. 왼쪽 하단의 WinForms, 오른쪽 상단의 WPF :

나는 WPF의 글꼴 렌더링 특유성에 대한 팬이 아니지만 애니메이션이 Winforms 캐스케이드에서와 같이 뛰어 오르면 그 소름을 상상할 수 있습니다.

레지스트리와 함께 연주

저에게 관심이있는 것은 MSDN 기사 " ClearType Registry Settings " 에 대한 링크입니다 .

  • 클리어 타입 레벨 : 서브 픽셀 힌트 량
  • 감마 레벨
  • 픽셀 구조 : 디스플레이 픽셀의 색상 줄무늬 배열 방법
  • 텍스트 대비 수준 : 글꼴을 더 무겁게 만들기 위해 글리프 줄기의 너비를 조정합니다

이러한 설정을 사용하면 근본적인 문제가 실제로 개선되지는 않지만 민감한 사용자의 색상 번짐 효과를 줄이는 데 도움이 될 수 있습니다.

다른 접근법

텍스트 선명도 기사에서 제공 한 최상의 조언은 글꼴 크기를 늘리고 글꼴을 변경하는 것이 었습니다. Calibri는 표준 Segoe UI보다 더 잘 작동합니다. 웹 글꼴로 인기가 있기 때문에 Verdana도 사용해 보았지만 글꼴 크기를 애니메이션으로 표시 할 때 14pt와 15pt 사이의 무게가 급격히 증가했습니다.

WPF 4.0

WPF 4는 글꼴 렌더링에 영향을주는 지원이 향상되었습니다. WPF 텍스트 블로그 에는 변경 사항을 설명 하는 기사 가 있습니다 . 가장 눈에 띄게, 적어도 세 가지 종류의 텍스트 렌더링이 있습니다.

텍스트 렌더링 비교

<grumble> 모든 디자이너에게 충분한 밧줄이어야합니다. </ grumble>


11
훌륭한 설명, +1. Flash에 왜 그런 무시 무시한 글꼴 렌더링이 있는지 설명합니다.
— Jeff Atwood

1
예. 좋은 설명이지만, 애니메이션 효과가 없을 때 글꼴 힌트를 사용하여 멋진 모양을 만들 수있는 방법이 여전히 필요합니다. 나는 이것이 당신이 힌트를 최적화하고있는 주어진 규모를 의미한다고 생각합니다. 이런 종류의 것들로 인해 WPF는 여전히 베타 버전으로 보입니다.
— PeterAllenWebb

"확장 가능"변형이 글꼴 힌트를 사용하지 않는 것과는 달리 ClearType과 같이 WPF가 픽셀 격자에 맞도록 최적화되지 않습니다. 아마도 SnapToDevicePixels는 텍스트에 대해 작동해야하지만, 컨트롤의 스냅 여부를 알 수 없기 때문에 항상 상속되어야합니다.
— David Schmitt

2
특히 TextOptions.TextFormattingMode 연결 속성 ( msdn.microsoft.com/en-us/library/ee169597.aspx )이 적합합니다. WPF4 및 Silverlight에는 UseLayoutRounding ( msdn.microsoft.com/en-us/library/dd783605.aspx ) 및 SnapsToDevicePixels ( msdn.microsoft.com/en-us/library/… ) 속성도 있습니다.
— Pat

@All : WPF3.5에서 텍스트 앤티 앨리어싱을 비활성화하는 방법을 찾을 수 없으므로 결과 레이블 또는 버튼 텍스트가 실제로 나빠 보입니다. 이상적으로는 글꼴에 대해 앤티 앨리어싱을 전체적으로 비활성화하고 싶습니다. 어떻게하면됩니까?
— SharpUrBrain

128

.NET 4는 결국 WPF의 열악한 텍스트 렌더링 품질에 대한 솔루션을 가지고 있지만 숨겨져 있습니다. 모든 창에 대해 다음을 설정하십시오.

TextOptions.TextFormattingMode="Display"

기본값은 "이상적"이며 이름에서 의미하는 바가 아닙니다.

TextOptions에는 TextHintingMode와 TextRenderingMode의 두 가지 옵션이 있지만 둘 다 합리적인 기본값을 갖습니다.


모두. 감사. 문제를 해결하는 데 도움이되지만 <grid>와 같은 컨테이너에 한 번만 정의하면됩니다
— Peter Du

예, 창에 설정하면 해당 창에 포함 된 모든 항목에 유효합니다.
— Helge Klein

VS2010 RTM / .Net 4에서 텍스트 형식이 얼마나 나은지에 대해 많은 사이트와 블로그 에서이 시간을 보냈습니다. (동의합니다!). 그러나 그들 중 누구도 WPF 응용 프로그램을 사용하여 어떻게 만들 수 있는지 언급하지 않았으며, 그렇게 좋아 보입니다. 왜 그 부동산이 잘 숨겨져 있습니까? 대단히 감사합니다.
— M-Peror

5
내가 원하는 것은 이것입니다! WPF 렌더링이 얼마나 정교한 지 신경 쓰지 않습니다. 글꼴은 누구나 받아 들일 수 없습니다.
— Jerry Liang

1
"디스플레이"대신 "이상적"이 작동합니다. 프로젝트는 .NET 4.6.2에 있습니다. 어쩌면 그들은 혼란스러운 이름을 고쳤을 것입니다.
— joe

40

다른 날 DropShadowEffect가 적용된 테두리를 사용할 때 문제가 발생했습니다 . 결과적으로 해당 테두리 안의 모든 텍스트가 매우 흐릿했습니다. 텍스트가 다른 패널 안에 있거나 테두리 바로 아래에 있든 상관 없습니다. 효과 가있는 부모의 자식 인 텍스트 블록 적용된 영향을받는 것 같습니다.

이 특별한 경우에 대한 해결책은 효과가있는 테두리 안에 물건을 넣지 말고 그리드 (또는 서로 위에 내용을 넣는 것을 지원하는 다른 것)를 사용하고 텍스트와 동일한 셀에 사각형을 배치하는 것입니다 (예 : 시각적 트리에서 형제로) 영향을 미칩니다.

이렇게 :

<!-- 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>

이것은 트릭을 훌륭하게 수행했습니다. 해킹의 비트,하지만 설정 등으로 엉망보다 낫습니다. 좋은 것. 감사. 그러나 내가해야 할 한 가지는 사각형 채우기를 무언가로 설정하는 것이 었습니다. 어쩌면 이것은 내 설정 일뿐입니다.
— HAdes

네 맞습니다. 사각형은 기본적으로 투명하므로 그림자가 이상하게 보입니다.
— Isak Savo

이 샘플 응용 프로그램에서 발생하지 않습니다, 나는 WPF 3.5를 사용하고 있습니다
— SharpUrBrain

@SharpUrBrain : 무슨 일이 일어나지 않습니까? 두 번째 예를 사용해도 여전히 흐릿합니까?
— Isak Savo

예, 두 번째 예를 사용한 후에도 여전히 흐릿합니다
— SharpUrBrain


6

SnapToDevicePixels는 텍스트 렌더러가 아닌 WPF 모양 (선 등)에만 적용됩니다.

이 문제에 대한 알려진 해결 방법이 없습니다. Microsoft에 따르면이 동작은 "설계"입니다.

또한 Microsoft 포럼 에서이 스레드를 통해 문제를 논의하십시오. 문제에 대한 입장을 분명히하는 MS 담당자로부터 몇 가지 대답을 받았습니다.


TextOptions.TextFormattingMode 첨부 속성 ( msdn.microsoft.com/en-us/library/ee169597.aspx )을 사용하여 WPF 4에서 수정되었습니다 .
— Pat

1
속성 이름은 "SnapsToDevicePixels"이며 작성된 "SnapToDevicePixels"가 아닙니다.
— Nir Kornfeld

6

개발자의 관점에서 현재까지 알려진 "해결 방법"은 GDI + 및 / 또는 Windows Forms TextRenderer 클래스를 사용하여 텍스트를 비트 맵으로 렌더링 한 다음 해당 비트 맵을 WPF 컨트롤로 렌더링하는 것입니다. 명백한 성능 영향을 제외하고 기존 응용 프로그램의 문제를 완화하지는 않습니다.

이 문제에 대한 Microsoft Connect 티켓을 만들었습니다. (모든 부정에도 불구하고 지정된 추적기에 실제 버그 보고서가 없었습니다).

그것이 요청과 질문을 Microsoft에 전달하는 공식 채널 중 하나이므로 더 빠른 답변을 위해이를 진행하는 것이 좋습니다. 최소한 문제를 다른 방식으로 해결하려면 해당 티켓에 투표하거나 문제를 확인하면 Microsoft PM 및 엔지니어의 관심을 끌고이 우선 순위를 높일 수 있습니다.


6

나는 그것을 버그로 보지 않지만 기본 구성은 실제로 매우 성가시다. 여기에 모든 조합의 비교가 있습니다

TextOptions.TextRenderingMode
TextOptions.TextFormattingMode
RenderOptions.ClearTypeHint

SnapToDevicePixels 텍스트 렌더링에 차이가 없습니다.

http://i.stack.imgur.com/cS3S2.png

나는 선호한다:

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

수직선이 결코 흐릿하지 않습니다.

사용 된 글꼴은 Open Sans Light이며 최신 TeamViewer 에서처럼 잘 사용하면 정말 아름답습니다.

Mahapps.Metro를 사용하는 경우 문제는 TransitioningContentControl https://github.com/MahApps/MahApps.Metro/issues/889입니다.


4

WPF에서 모두 수행되는 VS2010 베타를 시험해 보았습니다. 모호한 글꼴 문제로 인해 심하게 고통받습니다. 특히 툴팁에.

그것은 WPF4가 실제로 문제를 해결하지 못할 것이라는 증거를 제시하는 것 같습니다 (더 이상하게 보이지 않으면)


3
텍스트가 흐릿한 UI의 각 위치에 대해 VS2010B1에 대해 버그를 제기하고 있습니다. 툴팁은 거의 만화 적으로 나쁘다. 이것이 WPF4에서 수정되었다고 명시 적으로 말하면,이 베타 버전을 자르지 않았기를 바랍니다.
— 윌 딘

4

와우, 마침내 WPF 글꼴을 읽을 수 있다고 믿을 수 없습니다. 또한 디스플레이에서 기본값이 끔찍한 반면 이러한 변경을 쉽게 할 수있는 옵션 대화 상자가 없다고 믿을 수 없습니다.

이 레지스트리 설정 (10 진수)은 저에게 효과적이며 일반적인 일반 글꼴에 가장 가깝습니다.

  • ClearTypeLevel : 10 (대부분 그레이 스케일 앨리어싱)
  • GammaLevel : 1300 (감마가 높을수록 글꼴이 너무 얇아지고 앨리어싱에서 색상이 표시됨)

3

그들은 "SnapToDevicePixels = true"라고 말하지만 좋은 결과를 본 적이 없습니다.

다른 글꼴로 전환하여 희미한 텍스트를 방지합니다.

분명히 이것은 문제에 대한 해결책이 아니지만 이것이 내가 해결 한 방법입니다.


방금 TextBlock을 SnapToDevicePixels = "true"와 비교하고 12duis의 Segoe UI Font와는 차이 가 없었 습니다. 어떤 글꼴을 사용하는지 물어봐도 될까요?
— David Schmitt

또한 글꼴을 전환하여 상황을 개선했습니다. 우리가 선택한 글꼴은 Avenir였습니다 (적어도 Windows XP에는 설치되어 있지 않다고 생각합니다).
— cplotts

0

C # 기본 클래스를 사용하여 앱의 창을 사용자 정의하는 데 선호하거나 이유가있는 경우 매력적인 디스플레이 모드를 사용하도록 텍스트 형식을 설정하는 방법은 다음과 같습니다.

public class SnappyWindow : Window
{
    public SnappyWindow()
    {
        SetValue(TextOptions.TextFormattingModeProperty, TextFormattingMode.Display);
    }
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.