text-renderingVlastnost CSS umožňuje zvolit kvalitu textu před rychlostí (nebo naopak), což vám umožní jemně doladit optimalizace tím, že navrhne do prohlížeče, jak by měla vykreslit text na obrazovce. Řekl jiný způsob v MDN:
Vlastnost
text-renderingCSS poskytuje vykreslovacímu modulu informace o tom, co se má při vykreslování textu optimalizovat. Prohlížeč dělá kompromisy mezi rychlostí, čitelností a geometrickou přesností.
Zde můžete vidět některé před / po příklady. Výsledkem je někdy jen lepší vyrovnání párů:
Některé soubory písem obsahují další informace o tom, jak by mělo být písmo vykresleno. optimizeLegibilityvyužívá tyto informace a optimizeSpeedne.
Příklad
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Výkon
Když se říká, že existuje kompromis mezi rychlostí a přesností, nedělají si srandu. Mohou být zváženy významné problémy s výkonem. Tento článek stojí za to zcela citovat:
Ve skutečnosti existují významné, efektivně fatální problémy s výkonem (například 30sekundové zpoždění načítání nebo delší) na mobilních zařízeních při použití optimalizaceLegibility pro dlouhé stránky. Použijte jej, pouze pokud víte, jaká bude maximální délka textu. (Také se vyhněte jeho použití pro klienty Android, alespoň u starších verzí, které všichni stále používají: jeho vykreslovač písem má často velmi podivné chyby, když je tento režim povolen.)
Udělal jsem nějaké testování s Instapaperem, abych určil přibližné limity výkonu optimalizaceLegibility. Například článek o 5000 slovech v Instapaperu pro iOS bude používat pouze optimalizaciLegibility na zařízeních s procesorem třídy A5 nebo vyšším. Abychom se vyhnuli problémům na starších zařízeních iOS, nedoporučoval bych slepě a bezpodmínečně používat optimalizaciLegibility na jakékoli stránce delší než asi 1000 slov. A vůbec bych nedoporučoval povolení na Androidu.
Je lákavé udělat:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Ale na to buďte opatrní, zdá se být nebezpečný, zvláště když je aplikován na libovolnou stránku.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Možná po Blink? | ani náhodou | 2.3+? | 3+? |
Existují různé chyby. Problém Androidu s novými řádky. Chrome má různé, včetně mezer mezi písmeny. Safari (a další) ve výchozím nastavení spíše optimalizuje rychlost než určování za běhu.