Den text-renderingegendom i CSS kan du välja kvaliteten på text över hastighet (eller vice versa) så att du kan finjustera optimering genom att föreslå till webbläsaren hur den ska göra texten på skärmen. Sagt ett annat sätt i MDN:
Den
text-renderingCSS-egenskapen ger information till renderingsmotor om vad man ska optimera för vid rendering text. Webbläsaren gör avvägningar mellan hastighet, läsbarhet och geometrisk precision.
Du kan se några före / efter exempel här. Ibland är resultatet bara rakt upp bättre kerning:
Vissa teckensnittsfiler innehåller ytterligare information om hur teckensnittet ska återges. optimizeLegibilityanvänder sig av denna information och optimizeSpeedgör det inte.
Exempel
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Prestanda
När det sägs att det finns en kompromiss mellan hastighet och precision, skojar de inte. Det kan finnas betydande prestandafrågor att tänka på. Den artikeln är värt att citera helt:
Det finns faktiskt betydande, effektivt dödliga prestandaproblem (som 30 sekunders laddningsfördröjningar eller längre) på mobila enheter när du använder optimizeLegibility för långa sidor. Använd den bara om du vet vilken maximal textlängd som ska vara. (Undvik också att använda den för Android-klienter, åtminstone på de äldre versionerna som alla fortfarande använder: dess font-renderare har ofta väldigt konstiga buggar när detta läge är aktiverat.)
Jag testade med Instapaper för att bestämma ungefärliga gränser för optimeringsLegibility-prestanda. En artikel på 5000 ord i Instapaper för iOS använder till exempel bara optimizeLegibility på enheter med en A5-klass eller högre CPU. För att undvika problem på äldre iOS-enheter skulle jag inte rekommendera att du använder optimizeLegibility blint och villkorslöst på sidor som är längre än cirka 1000 ord. Och jag skulle inte rekommendera att aktivera det på Android alls.
Det är frestande att göra:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Men var försiktig med det, verkar farligt särskilt när det tillämpas på en godtycklig sida.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Kanske efter Blink? | Nej | 2.3+? | 3+? |
Det finns olika buggar. Android-utgåva med nya rader. Chrome har olika, inklusive bokstavsavstånd. Safari (och andra) är standard för att optimera Speed snarare än att bestämma i farten.