Masalah font WPF Blurry- Solusi


153

Masalah dijelaskan dan ditunjukkan pada tautan berikut:

Penjelasan: Kejelasan Teks dalam WPF . Tautan ini memiliki perbandingan font.

Saya ingin mengumpulkan semua kemungkinan solusi untuk masalah ini. Microsoft Expression Blend menggunakan WPF tetapi font terlihat dapat dibaca.

  • Latar belakang gelap seperti dalam Microsoft Expression Blend
  • Meningkatkan ukuran font dan mengubah font (Calibri ...) [tautan]
  • Sematkan formulir windows [tautan]
  • Gunakan GDI + dan / atau kelas Windows Forms TextRenderer untuk merender teks ke bitmap, dan kemudian render bitmap itu sebagai kontrol WPF. [tautan]

Apakah ada solusi lain?

Ini akan diperbaiki dalam VS2010 (dan WPF4) beta 2

ITU TERLIHAT SEPERTI ITU AKHIRNYA DIPENUHI!

Scott Hanselman ComputerZen.com: WPF dan Text Blurriness, sekarang dengan kejelasan lengkap


VS2010RC benar-benar tidak dapat digunakan untuk saya mpdreamz.nl/vs2010RC-blur.png
Martijn Laarman

VS2010RC pada komputer saya terlihat jauh lebih baik daripada gambar Anda, sebenarnya dengan latar belakang putih sangat bagus tapi masih menyebalkan dengan latar belakang gelap.
Robert Vuković

Apakah Anda menemukan solusi untuk masalah ini, Sebenarnya saya memiliki masalah yang sama di sini dalam aplikasi saya dan saya menggunakan WPF 3.5 dengan VS2010
SharpUrBrain

3 tautan terakhir sudah mati.
SHIN JaeGuk

Jawaban:


107

Latar belakang teknis

Ada artikel mendalam tentang rendering Teks WPF dari salah satu Manajer Program Teks WPF di windowsclient.net: Kejelasan Teks dalam WPF .

Masalahnya bermuara pada WPF membutuhkan font-renderer penskalaan linear untuk animasi yang halus. Pure ClearType di sisi lain membutuhkan sedikit kebebasan dengan font untuk mendorong batang vertikal ke piksel berikutnya.

Perbedaannya jelas jika seseorang membandingkan pola "kaskade" klasik. WinForms di sisi kiri bawah, WPF di sisi kanan atas:

Sementara saya bukan penggemar font rendering font WPF juga, saya bisa membayangkan keributan jika animasi akan melompat seperti yang mereka lakukan di kaskade Winforms.

Bermain dengan registri

Yang menarik bagi saya adalah tautan ke artikel MSDN " ClearType Registry Settings ", yang menjelaskan kemungkinan penyesuaian sisi pengguna dalam registri:

  • Level ClearType: jumlah isian subpixel
  • Tingkat gamma
  • Struktur piksel: bagaimana garis-garis warna pada layar-piksel disusun
  • Tingkat kontras teks: menyesuaikan lebar batang mesin terbang untuk membuat font lebih berat

Bermain-main dengan pengaturan ini tidak benar-benar memperbaiki masalah yang mendasarinya, tetapi dapat membantu dengan mengurangi efek pendarahan warna untuk pengguna yang sensitif.

Pendekatan lain

Saran terbaik yang diberikan artikel Teks Kejelasan adalah meningkatkan ukuran font dan mengubah font. Calibri bekerja untuk saya lebih baik daripada Segoe UI standar. Karena popularitasnya sebagai font web, saya mencoba Verdana juga, tetapi memiliki lompatan berat antara 14pt dan 15pt yang sangat terlihat ketika menggerakkan ukuran font.

WPF 4.0

WPF 4 akan memiliki dukungan yang lebih baik untuk mempengaruhi rendering font. Ada artikel di Blog Teks WPF yang menjelaskan perubahan. Yang paling menonjol, sekarang ada (setidaknya) tiga jenis rendering teks:

perbandingan rendering teks

<grumble> Itu seharusnya cukup menjadi tali untuk setiap desainer. </grumble>


11
penjelasan yang sangat baik, +1. Mungkin menjelaskan mengapa Flash memiliki rendering font yang mengerikan juga.
Jeff Atwood

1
Iya. Itu penjelasan yang bagus, tapi saya masih berharap ada cara untuk mengaktifkan font yang mengisyaratkan tampilan yang bagus ketika Anda tahu Anda tidak akan bernyawa. Saya kira ini akan menyiratkan skala tertentu yang Anda optimalkan petunjuknya. Hal-hal semacam ini membuat WPF tampaknya masih versi beta bagi saya.
PeterAllenWebb

Ini tidak seperti varian "skalabel" yang tidak menggunakan petunjuk font, hanya saja WPF tidak mengoptimalkan untuk mengenai pixel grid, seperti yang dilakukan ClearType. Bisa dibilang SnapToDevicePixels harus bekerja untuk teks, tetapi ini harus selalu diwarisi karena kontrol tidak dapat mengetahui apakah itu snap atau tidak.
David Schmitt

2
Terutama relevan adalah properti terlampir TextOptions.TextFormattingMode ( msdn.microsoft.com/en-us/library/ee169597.aspx ). WPF4 dan Silverlight juga memiliki properti UseLayoutRounding ( msdn.microsoft.com/en-us/library/dd783605.aspx ) dan SnapsToDevicePixels ( msdn.microsoft.com/en-us/library/… ).
Pat

@ Semua: Saya tidak dapat menemukan cara untuk menonaktifkan anti-aliasing teks di WPF3.5 dan sebagai hasilnya label atau tombol teks terlihat sangat buruk. Idealnya saya ingin menonaktifkan anti aliasing secara global untuk font. Bagaimana saya bisa mencapai ini?
SharpUrBrain

128

.NET 4 akhirnya memiliki solusi untuk kualitas rendering teks WPF yang buruk, tetapi disembunyikan dengan baik. Tetapkan yang berikut untuk setiap jendela:

TextOptions.TextFormattingMode="Display"

Nilai default adalah "Ideal" yang sama sekali tidak sesuai dengan namanya.

Ada dua opsi lain di TextOptions, yaitu TextHintingMode dan TextRenderingMode, tetapi keduanya memiliki default yang masuk akal.


Semua. Terima kasih. Itu membantu saya untuk menyelesaikan masalah, tetapi Anda hanya perlu mendefinisikannya sekali dalam wadah seperti <grid>
Peter Du

Ya, dan jika Anda mengaturnya di jendela itu valid untuk semua yang ada di dalam jendela itu.
Helge Klein

Menghabiskan banyak waktu mencari ini, di banyak situs dan blog, yang terus-menerus tentang seberapa baik format teks dalam VS2010 RTM / .Net 4 (Saya setuju, ini!). Tapi tidak satupun dari mereka yang peduli bagaimana Anda bisa membuat WPF-aplikasi yang Anda buat dengannya, terlihat bagus juga. Mengapa properti itu begitu tersembunyi? Terima kasih banyak.
M-Peror

5
Yang saya inginkan adalah ini! Saya benar-benar tidak peduli seberapa canggih rendering WPF, font-font tersebut tidak dapat diterima oleh siapa pun.
Jerry Liang

1
"Ideal" bekerja untuk saya, alih-alih "Tampilan". Proyek ini pada .NET 4.6.2. Mungkin mereka memperbaiki nama yang bingung.
joe

40

Saya mengalami masalah tempo hari ketika saya menggunakan perbatasan yang menerapkan DropShadowEffect . Hasilnya adalah semua teks di dalam perbatasan itu sangat buram. Tidak masalah apakah teks ada di dalam panel lain atau langsung di bawah perbatasan - blok teks apa pun yang merupakan induk dari orang tua yang memiliki Efek yang diterapkan tampaknya akan terpengaruh.

Solusi untuk kasus khusus ini adalah untuk tidak meletakkan barang-barang di dalam perbatasan yang memiliki efek, tetapi sebaliknya menggunakan kotak (atau apa pun yang mendukung menempatkan konten di atas satu sama lain) dan menempatkan persegi panjang di sel yang sama dengan teks (yaitu sebagai saudara di pohon visual) dan memberikan efek pada itu.

Seperti itu:

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

Ini melakukan trik dengan baik. Sedikit peretasan, tapi lebih baik daripada bermain-main dengan pengaturan dll. Bagus. Terima kasih. Satu hal yang harus saya lakukan adalah mengatur isi persegi panjang menjadi sesuatu. Mungkin ini hanya pengaturan saya.
HAdes

Ya Anda benar .. persegi panjang secara default transparan yang membuat drop shadow terlihat aneh.
Isak Savo

ini tidak terjadi dalam aplikasi sampel saya, saya menggunakan WPF 3.5
SharpUrBrain

@SharpUrBrain: apa yang tidak terjadi? Apakah masih buram bahkan setelah menggunakan contoh kedua saya?
Isak Savo

Ya, masih buram setelah menggunakan contoh kedua Anda juga
SharpUrBrain


6

SnapToDevicePixels hanya berlaku untuk bentuk WPF (baris dll.), Bukan untuk renderer teks.

Tidak ada solusi yang diketahui untuk masalah ini. Menurut Microsoft, perilakunya adalah "sesuai desain".

Lihat juga utas ini di forum Microsoft yang membahas masalah - ada beberapa balasan dari MS yang menjelaskan posisi mereka dalam masalah ini.


Diperbaiki di WPF 4 menggunakan properti terlampir TextOptions.TextFormattingMode ( msdn.microsoft.com/en-us/library/ee169597.aspx ).
Pat

1
Nama properti adalah "SnapsToDevicePixels" dan bukan "SnapToDevicePixels" seperti yang tertulis.
Nir Kornfeld

6

Dari sudut pandang pengembang, satu-satunya "solusi" yang dikenal hingga saat ini adalah menggunakan kelas GDI + dan / atau Windows Forms TextRenderer untuk merender teks menjadi bitmap, dan kemudian merender bitmap itu sebagai kontrol WPF. Selain implikasi kinerja yang jelas, ini tidak mengurangi masalah untuk aplikasi yang ada.

Saya sekarang telah membuat tiket Microsoft Connect untuk masalah ini (yang mengejutkan saya, terlepas dari semua hal negatifnya, tidak ada laporan bug aktual di pelacak yang ditunjuk).

Karena itu adalah salah satu saluran resmi untuk mengkomunikasikan permintaan dan pertanyaan ke Microsoft, saya juga menyarankan untuk melewatinya untuk jawaban yang lebih cepat. Paling tidak, jika Anda ingin masalah ini diatasi dengan satu atau lain cara, memilih tiket itu di sana dan / atau memvalidasi masalah akan membantu menarik perhatian PM dan insinyur Microsoft terhadap masalah ini, dan mungkin meningkatkan prioritas yang dirasakan.


6

Saya tidak melihatnya sebagai bug, tetapi konfigurasi defaultnya memang sangat mengganggu. Berikut ini adalah perbandingan dari semua kombinasi

TextOptions.TextRenderingMode
TextOptions.TextFormattingMode
RenderOptions.ClearTypeHint

SnapToDevicePixels tidak membuat perbedaan dalam rendering teks.

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

Saya lebih memilih:

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

di mana garis vertikal tidak pernah buram.

Font yang digunakan adalah Open Sans Light, yang dapat benar-benar indah jika digunakan dengan baik, seperti di TeamViewer terbaru.

Bagi mereka yang menggunakan Mahapps.Metro, masalahnya adalah TransitioningContentControl https://github.com/MahApps/MahApps.Metro/issues/889


4

Baru saja mencoba VS2010 beta, yang semuanya dilakukan dalam WPF, dan menderita BADLY dari masalah font-blur. Terutama pada tooltips.

Itu tampaknya memberikan beberapa bukti bahwa WPF4 pada kenyataannya tidak akan menyelesaikan masalah (jika terlihat lebih buruk)


3
Saya mengajukan bug terhadap VS2010B1 untuk setiap tempat di UI, teksnya buram. Tooltips hampir lucu, saya setuju. Mengingat betapa eksplisitnya dikatakan ini harus diperbaiki di WPF4, saya hanya bisa berharap itu tidak membuat potongan untuk beta ini.
Will Dean

4

Wow, saya tidak percaya akhirnya font WPF saya bisa dibaca. Dan saya juga tidak percaya tidak ada dialog opsi untuk membuat perubahan ini mudah sementara nilai defaultnya mengerikan pada tampilan saya.

Pengaturan registri ini (dalam desimal) bekerja untuk saya dan menjadi yang paling dekat dengan font jenis penulisan biasa:

  • ClearTypeLevel: 10 (kebanyakan aliasing abu-abu)
  • GammaLevel: 1300 (gamma yang lebih tinggi membuat font terlalu tipis dan saya melihat warna di aliasing)

3

Mereka mengatakan "SnapToDevicePixels = true" berfungsi, tetapi saya belum pernah melihat hasil yang baik.

Saya memerangi teks kabur dengan beralih ke font lain.

Jelas ini bukan solusi untuk masalah ini, namun inilah cara saya mengatasinya.


Saya baru saja membandingkan TextBlock dengan SnapToDevicePixels = "true" dengan yang tanpa dan tidak ada perbedaan dengan Segoe UI Font di 12duis. Bolehkah saya bertanya font apa yang Anda gunakan?
David Schmitt

Kami juga membuat situasi lebih baik dengan mengganti font kami. Font yang kami pilih adalah Avenir (saya tidak berpikir itu diinstal secara default, setidaknya tidak pada Windows XP).
cplotts

0

Jika Anda lebih suka menggunakan kelas dasar C # untuk mengkustomisasi windows untuk aplikasi Anda (atau sekarang punya alasan untuk), inilah cara Anda mengatur dapat mengatur pemformatan teks untuk menggunakan mode Tampilan yang menarik:

public class SnappyWindow : Window
{
    public SnappyWindow()
    {
        SetValue(TextOptions.TextFormattingModeProperty, TextFormattingMode.Display);
    }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.