Den text-renderingejendom i CSS giver dig mulighed for at vælge kvaliteten af tekst over hastighed (eller omvendt), så du kan finjustere optimering ved at foreslå til browseren om, hvordan det skal gengive tekst på skærmen. Sagde en anden måde i MDN:
Den
text-renderingCSS egenskab giver information til rendering engine om hvad man skal optimere for når rendering tekst. Browseren foretager afvejninger mellem hastighed, læsbarhed og geometrisk præcision.
Du kan se nogle før / efter eksempler her. Nogle gange er resultatet bare lige op bedre kerning:
Nogle skrifttypefiler indeholder yderligere oplysninger om, hvordan skrifttypen skal gengives. optimizeLegibilitygør brug af disse oplysninger og optimizeSpeedgør det ikke.
Eksempel
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Ydeevne
Når det siges, at der er en kompromis mellem hastighed og præcision, tuller de ikke. Der kan være betydelige præstationsproblemer at overveje. Denne artikel er helt værd at citere:
Der er faktisk betydelige, effektivt fatale ydeevneproblemer (såsom 30 sekunders indlæsningsforsinkelser eller længere) på mobile enheder, når du bruger optimizeLegibility til lange sider. Anvend det kun, hvis du ved, hvad den maksimale tekstlængde vil være. (Undgå også at bruge det til Android-klienter, i det mindste på de ældre versioner, som alle stadig bruger: dens fontgengivelse har ofte meget mærkelige fejl, når denne tilstand er aktiveret.)
Jeg lavede nogle test med Instapaper for at bestemme de omtrentlige grænser for ydeevne til optimering af læsbarhed. En artikel på 5.000 ord i Instapaper til iOS bruger f.eks. Kun optimizeLegibility på enheder med en A5-klasse eller større CPU. For at undgå problemer på ældre iOS-enheder vil jeg ikke anbefale at bruge optimizeLegibility blindt og ubetinget på sider, der er længere end ca. 1.000 ord. Og jeg vil slet ikke anbefale at aktivere det på Android.
Det er fristende at gøre:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Men vær forsigtig med det, synes farligt, især når det anvendes på en vilkårlig side.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Måske post-Blink? | Nix | 2.3+? | 3+? |
Der er forskellige bugs. Android-problem med nye linjer. Chrome har forskellige, inklusive bogstavafstand. Safari (og andre) er standard for at optimere Speed i stedet for at bestemme i farten.