Den text-renderingeiendom i CSS lar deg velge kvalitet på tekst over hastighet (eller vice versa) slik at du kan finjustere optimalisering ved å foreslå til leseren om hvordan den skal gjengi teksten på skjermen. Sa en annen måte i MDN:
Den
text-renderingCSS eiendom gir informasjon til rendering motoren på hva du kan optimalisere for ved gjengivelse tekst. Nettleseren gjør kompromisser mellom hastighet, lesbarhet og geometrisk presisjon.
Du kan se noen før / etter eksempler her. Noen ganger er resultatet bare rett opp bedre skjæring:
Noen fontfiler inneholder ytterligere informasjon om hvordan fonten skal gjengis. optimizeLegibilitybruker denne informasjonen, og optimizeSpeedgjør det ikke.
Eksempel
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Opptreden
Når det sies at det er en kompromiss mellom hastighet og presisjon, tuller de ikke. Det kan være viktige ytelsesproblemer å vurdere. Den artikkelen er verdt å sitere helt:
Det er faktisk betydelige, effektivt fatale ytelsesproblemer (for eksempel 30 sekunders lasteforsinkelser eller lenger) på mobile enheter når du bruker optimizeLegibility for lange sider. Bruk den bare hvis du vet hva den maksimale tekstlengden vil være. (Unngå også å bruke den til Android-klienter, i det minste på de eldre versjonene som alle fremdeles bruker: fontgjengiveren har ofte veldig rare feil når denne modusen er aktivert.)
Jeg gjorde noen tester med Instapaper for å bestemme tilnærmede ytelsesgrenser for optimalisering. En artikkel på 5000 ord i Instapaper for iOS, for eksempel, bruker bare optimizeLegibility på enheter med en A5-klasse eller større CPU. For å unngå problemer på eldre iOS-enheter, vil jeg ikke anbefale å bruke optimizeLegibility blindt og ubetinget på sider som er lengre enn 1000 ord. Og jeg vil ikke anbefale å aktivere det på Android i det hele tatt.
Det er fristende å gjøre:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Men vær forsiktig med det, virker farlig, spesielt når det brukes på en vilkårlig side.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Kanskje etter Blink? | Nei | 2.3+? | 3+? |
Det er forskjellige feil. Android-utgave med nye linjer. Chrome har forskjellige, inkludert bokstavavstand. Safari (og andre) er standard for å optimalisere Speed i stedet for å bestemme på farten.