text-renderingProprietatea în CSS vă permite să alegeți calitatea textului peste viteza (sau invers) , permițându - vă să reglați fin optimizarea sugerându la browser cu privire la modul în care aceasta ar trebui să facă textul de pe ecran. A spus un alt mod în MDN:
Proprietatea
text-renderingCSS furnizează informații motorului de redare despre ceea ce trebuie optimizat pentru redarea textului. Browserul face compromisuri între viteză, lizibilitate și precizie geometrică.
Puteți vedea câteva exemple înainte / după aici. Uneori, rezultatul este doar o creștere mai bună:
Unele fișiere de fonturi conțin informații suplimentare despre modul în care fontul ar trebui redat. optimizeLegibilityfolosește aceste informații și optimizeSpeednu le face.
Exemplu
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Performanţă
Când se spune că există un compromis între viteză și precizie, acestea nu glumesc. Pot fi luate în considerare probleme semnificative de performanță. Acest articol merită citat în întregime:
De fapt, există probleme semnificative, efectiv fatale de performanță (cum ar fi întârzieri de încărcare de 30 de secunde sau mai lungi) pe dispozitivele mobile atunci când se utilizează optimizeLegibility pentru pagini lungi. Aplicați-l numai dacă știți care va fi lungimea maximă a textului. (De asemenea, evitați să-l utilizați pentru clienții Android, cel puțin pentru versiunile mai vechi pe care toată lumea le folosește încă: redarea fontului său are deseori erori foarte ciudate atunci când acest mod este activat.)
Am făcut câteva teste cu Instapaper pentru a determina limitele aproximative de performanță optimizeLegibility. Un articol de 5.000 de cuvinte din Instapaper pentru iOS, de exemplu, va folosi optimizeLegibility numai pe dispozitive cu un procesor de clasă A5 sau mai mare. Pentru a evita problemele de pe dispozitivele iOS mai vechi, nu aș recomanda utilizarea optimizeLegibility în mod orb și necondiționat pe orice pagini mai lungi de aproximativ 1.000 de cuvinte. Și nu aș recomanda deloc activarea acestuia pe Android.
Este tentant să faci:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Dar fii atent, pare periculos mai ales atunci când este aplicat pe o pagină arbitrară.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Poate post-Blink? | nu | 2.3+? | 3+? |
Există diverse bug-uri. Problemă Android cu linii noi. Chrome are diverse, inclusiv spațierea literelor. Safari (și altele) implicit pentru a optimiza viteza, mai degrabă decât pentru a determina din mers.