La text-renderingproprietà in CSS ti permette di scegliere la qualità del testo rispetto alla velocità (o viceversa) permettendoti di mettere a punto l'ottimizzazione suggerendo al browser come dovrebbe rendere il testo sullo schermo. Ha detto un altro modo in MDN:
La
text-renderingproprietà CSS fornisce informazioni al motore di rendering su cosa ottimizzare durante il rendering del testo. Il browser fa dei compromessi tra velocità, leggibilità e precisione geometrica.
Puoi vedere alcuni esempi prima / dopo qui. A volte il risultato è semplicemente una crenatura migliore:
Alcuni file di font contengono informazioni aggiuntive su come il font deve essere reso. optimizeLegibilityfa uso di queste informazioni e optimizeSpeednon lo fa.
Esempio
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Prestazione
Quando si dice che c'è un compromesso tra velocità e precisione, non stanno scherzando. Possono esserci problemi di prestazioni significativi da considerare. Quell'articolo vale la pena citare interamente:
Ci sono effettivamente problemi di prestazioni significativi ed effettivamente fatali (come ritardi di caricamento di 30 secondi o più) sui dispositivi mobili quando si utilizza optimLegibility per pagine lunghe. Applicalo solo se sai quale sarà la lunghezza massima del testo. (Inoltre, evita di usarlo per i client Android, almeno sulle versioni precedenti che tutti usano ancora: il suo renderer di font ha spesso bug molto strani quando questa modalità è abilitata.)
Ho eseguito alcuni test con Instapaper per determinare i limiti approssimativi delle prestazioni di optimLegibility. Un articolo di 5.000 parole su Instapaper per iOS, ad esempio, utilizzerà solo optimLegibility su dispositivi con una CPU di classe A5 o superiore. Per evitare problemi con i dispositivi iOS meno recenti, non consiglierei di utilizzare optimLegibility alla cieca e incondizionatamente su pagine più lunghe di circa 1.000 parole. E non consiglierei affatto di abilitarlo su Android.
Si è tentati di fare:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Ma stai dannatamente attento, sembra pericoloso soprattutto se applicato a una pagina arbitraria.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Forse post-Blink? | no | 2.3+? | 3+? |
Ci sono vari bug. Problema Android con nuove linee. Chrome ha vari, inclusa la spaziatura delle lettere. Safari (e altri) per impostazione predefinita ottimizzano la velocità piuttosto che determinarli al volo.