text-renderingVlastnosť CSS umožňuje zvoliť kvalitu textu pred rýchlosťou (alebo naopak), čo vám umožní jemne doladiť optimalizácia tým, že navrhne do prehliadača, ako by mala vykresliť text na obrazovke. Iný spôsob v MDN:
Vlastnosť
text-renderingCSS poskytuje vykresľovaciemu modulu informácie o tom, čo sa má pri vykresľovaní textu optimalizovať. Prehliadač robí kompromisy medzi rýchlosťou, čitateľnosťou a geometrickou presnosťou.
Tu si môžete pozrieť zopár príkladov pred a po. Výsledkom je niekedy len lepšie vyrovnanie párov:
Niektoré súbory písma obsahujú ďalšie informácie o spôsobe vykreslenia písma. optimizeLegibilityvyužíva tieto informácie a optimizeSpeednie.
Príklad
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Výkon
Keď sa povie, že existuje kompromis medzi rýchlosťou a presnosťou, nerobia si srandu. Môžu byť zvážené významné problémy s výkonom. Tento článok stojí za to úplne citovať:
Pri použití optimalizačnej viditeľnosti pre dlhé stránky skutočne existujú významné a skutočne fatálne problémy s výkonom (napríklad 30-sekundové oneskorenie načítania alebo dlhšie) na mobilných zariadeniach. Použite ho, iba ak viete, aká bude maximálna dĺžka textu. (Nepoužívajte ho tiež pre klientov systému Android, prinajmenšom v starších verziách, ktoré všetci stále používajú: jeho vykresľovač písma má pri zapnutí tohto režimu často veľmi zvláštne chyby.)
Urobil som nejaké testovanie s Instapaperom, aby som určil približné limity výkonu optimizeLegibility. Napríklad článok v 5 000 slovách v Instapapere pre iOS použije optimalizačnú čitateľnosť iba na zariadeniach s procesorom triedy A5 alebo vyšším. Ak sa chcete vyhnúť problémom so staršími zariadeniami so systémom iOS, neodporúčam ti používať optimalizovanú viditeľnosť slepo a bezpodmienečne na akýchkoľvek stránkach dlhších ako 1 000 slov. A vôbec by som ho neodporúčal povoliť na Androide.
Je lákavé urobiť:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Na to však buďte opatrní, zdá sa byť nebezpečný, najmä ak sa použije na ľubovoľnej stránke.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Možno post-Blink? | nie | 2,3+? | 3+? |
Existujú rôzne chyby. Problém s Androidom pri nových riadkoch. Prehliadač Chrome má rôzne možnosti, vrátane medzery medzi písmenami. Safari (a ďalšie) predvolene optimalizuje rýchlosť skôr, ako určuje za chodu.