Met de text-renderingeigenschap in CSS kunt u de kwaliteit van de tekst kiezen boven de snelheid (of omgekeerd), zodat u de optimalisatie kunt verfijnen door de browser voor te stellen hoe deze tekst op het scherm moet weergeven. Anders gezegd in MDN:
De
text-renderingCSS-eigenschap geeft de rendering-engine informatie over waarvoor geoptimaliseerd moet worden bij het renderen van tekst. De browser maakt compromissen tussen snelheid, leesbaarheid en geometrische precisie.
U kunt hier enkele voor / na voorbeelden zien. Soms is het resultaat gewoon een betere kerning:
Sommige lettertypebestanden bevatten aanvullende informatie over hoe het lettertype moet worden weergegeven. optimizeLegibilitymaakt gebruik van deze informatie, en optimizeSpeeddoet dat niet.
Voorbeeld
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Prestatie
Als er wordt gezegd dat er een afweging is tussen snelheid en precisie, maken ze geen grapje. Er kunnen aanzienlijke prestatieproblemen zijn waarmee u rekening moet houden. Dat artikel is het vermelden waard:
Er zijn in feite aanzienlijke, in feite fatale prestatieproblemen (zoals vertragingen bij het laden van 30 seconden of langer) op mobiele apparaten wanneer u optimLegibility voor lange pagina's gebruikt. Pas het alleen toe als u weet wat de maximale tekstlengte zal zijn. (Gebruik het ook niet voor Android-clients, althans voor de oudere versies die iedereen nog steeds gebruikt: de renderer voor lettertypen bevat vaak zeer vreemde bugs wanneer deze modus is ingeschakeld.)
Ik heb wat tests gedaan met Instapaper om de geschatte prestatielimieten van OptimLegibility te bepalen. Een artikel van 5000 woorden in Instapaper voor iOS gebruikt bijvoorbeeld alleen optimLegibility op apparaten met een A5-klasse of grotere CPU. Om problemen op oudere iOS-apparaten te voorkomen, zou ik niet aanraden om optimLegibility blindelings en onvoorwaardelijk te gebruiken op pagina's die langer zijn dan ongeveer 1.000 woorden. En ik zou het helemaal niet aanraden om het op Android in te schakelen.
Het is verleidelijk om te doen:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Maar wees daar voorzichtig mee, het lijkt gevaarlijk, vooral wanneer het op een willekeurige pagina wordt toegepast.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Misschien post-Blink? | Nee | 2.3+? | 3+? |
Er zijn verschillende bugs. Android-probleem met nieuwe regels. Chrome heeft verschillende, waaronder letterafstand. Safari (en anderen) optimaliseren standaard de snelheid in plaats van direct te bepalen.