IE 9 non utilizza l’antialiasing sub-pixel in determinate condizioni

[Titolo originale: IE 9 text rende molto male; c’è una soluzione? )

IE 9 sta rendendo il testo della mia applicazione molto scarso. Il problema non si trova nelle impostazioni Clear Type del mio monitor, dal momento che IE 9 in modalità compatibilità, Firefox e Chrome rendono tutti i caratteri ben visualizzati. Ecco un confronto affiancato di come viene eseguito il rendering del testo con IE 9, IE 9 in modalità compatibilità e Chrome:

IE 9

IE 9 modalità di compatibilità

inserisci la descrizione dell'immagine qui

Ho provato ad applicare questa risposta , ma non sembra applicarsi a nulla dopo IE 7. Qualcuno sa di soluzioni alternative che possiamo applicare al nostro sito per correggere il rendering di testo non valido di IE 9?

Modificare:

Ho ridotto la pagina del problema all’essenziale. Come puoi vedere, non ci vuole molto per riprodurlo. Assicurati che IE abbia una modalità browser se IE9 e la modalità documento degli standard IE9:

  Home   

Sembra impostare l’ opacity:.9999 sul body rende il testo in modalità standard IE9 molto più simile a come funziona in modalità Quirks.

Risposta breve: questo è un problema quando si specificano le dimensioni del carattere in pt (punti), piuttosto che in pixel.

Quindi, ciò che accade è che il nuovo motore di rendering IE9 utilizza DirectWrite, che non eseguirà lo snap al pixel più vicino come faceva con GDI +, quindi se la tua dimensione pt non si associa a un intero numero di pixel, la disegnerà esattamente in quel modo , che lo rende sfocato.

La modalità di compatibilità IE8 non subirebbe questo problema poiché utilizza il normale rendering GDI a cui siamo abituati.

Quindi controlla tutti i tuoi fogli di stile ecc. E se stai chiedendo font di dimensioni in punti, questo è esattamente ciò che verrà fornito in IE9 e, a seconda del font utilizzato, ecc., La tua dimensione potrebbe essere mappata a una dimensione nitida e chiara.

Questo è spiegato in dettaglio qui:

IE9 in modalità standard utilizza l’indirizzamento sub-pixel per il testo. Si può dire che “uniformi” i caratteri di testo, oppure si può dire il contrario, cioè “offusca” i personaggi. È essenzialmente la stessa cosa.

Personalmente non trovo differenze facilmente percepibili tra le tue tre immagini, e in realtà preferisco il primo. Tuttavia, dipende dalle preferenze personali.

Ho cercato un po ‘il web, e non sembra un modo per pulire distriggersre il rendering sub-pixel su IE9. Questo link potrebbe interessarti: Distriggers Cleartype (testo anti-aliasing) in IE9

In WPF, c’è un’opzione per distriggersre il rendering dei caratteri sub-pixel e forzare le lettere su “snap a pixel”. Ma IE9 non sembra avere un tale interruttore.

Tuttavia, la mia raccomandazione è: è un grosso problema che si vorrebbe fare in primo luogo? Se il rendering del testo sub-pixel ti dà un risultato molto brutto sul tuo sito (stai usando un tipo molto piccolo?), Forse avrai bisogno di ripensare il layout del tuo sito in primo luogo. Scrivi che è così piccolo che il rendering sub-pixel li rende poco chiari è meglio evitare in un sito web.

E non si sa quando altri browser aggiungeranno il rendering sub-pixel al testo in futuro, infatti FF4 usa già Direct2D, ma potrebbe non utilizzare DirectWrite.

Internet Explorer 9 sembra smettere di usare l’antialiasing sub-pixel in condizioni davvero casuali. Ad esempio, ecco un altro esempio che lo innesca (presumo che ce ne siano altri):

     Outside the div - with sub-pixel AA. :) 
Inside the div - no sub-pixel AA. :(

Il testo all’interno del div non verrà reso con anti-alias secondario (“colorato”), ma il testo al di fuori di esso lo sarà. Sia il border-radius che le dichiarazioni di overflow sono necessarie per triggersre il bug.

(Qualcuno può provare se succede sul loro sistema e lasciare un commento? Sarei interessato a sapere se il bug è triggersto solo su alcune configurazioni di sistema.)

Se si passa la modalità documento in IE Developer Tools a qualsiasi cosa tranne “standard IE9”, il problema scompare.

Personalmente sono quasi disposto a conviverci, ma se ti infastidisce, ti suggerisco di smontare il tuo foglio di stile passo dopo passo per rintracciare ciò che lo innesca.

L’unico modo in cui riesco a far apparire bene i caratteri è quello di ricorrere alle funzionalità di IE8 tramite:

  

L’aggiornamento Microsoft http://support.microsoft.com/kb/2545698 era già stato installato e utilizzo già font-size: 11px;

L’ opacity:.9999 soluzione opacity:.9999 era meglio di niente, ma non buono come mostra la modalità IE8.

Il rendering dei caratteri ClearType viene utilizzato in tutte le modalità documento IE9; il posizionamento sub-pixel viene utilizzato solo nella modalità standard predefinita di IE9. Le modalità di compatibilità di IE9: Quirk, 7 e 8 utilizzano metriche di testo a pixel interi.

Quindi prova a cambiare il tuo doctype per usare la modalità Quirks :

  

o

  

o una delle modalità di compatibilità.

Maggiori informazioni da MSDN

  • IE9’s Document Mode e JavaScript
  • Font subpixel in IE9

  • Guida di Internet Explorer 9 per sviluppatori

  • Ricettario di compatibilità di Internet Explorer 9
  • Funzionalità di compatibilità di IE per sviluppatori di siti
  • Test dei siti con la modalità Browser e la modalità Doc
  • Definizione della compatibilità dei documenti

Se hai bisogno di usare IE e odio quella levigatura come in questa immagine http://sofit.miximages.com/internet-explorer-9/SViG0.png Prova ad triggersre la Visualizzazione Compatibilità (ALT + T per visualizzare il menu Strumenti)