La text-renderingpropriété en CSS vous permet de choisir la qualité du texte par rapport à la vitesse (ou vice versa), ce qui vous permet d'affiner l'optimisation en suggérant au navigateur comment il doit rendre le texte à l'écran. Dit d'une autre manière dans MDN:
La
text-renderingpropriété CSS fournit des informations au moteur de rendu sur ce qu'il faut optimiser lors du rendu du texte. Le navigateur fait des compromis entre vitesse, lisibilité et précision géométrique.
Vous pouvez voir quelques exemples avant / après ici. Parfois, le résultat est tout simplement un meilleur crénage:
Certains fichiers de polices contiennent des informations supplémentaires sur la manière dont la police doit être rendue. optimizeLegibilityutilise ces informations et optimizeSpeedne le fait pas.
Exemple
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Performance
Quand on dit qu'il y a un compromis entre vitesse et précision, ils ne plaisantent pas. Il peut y avoir des problèmes de performances importants à prendre en compte. Cet article mérite d'être cité entièrement:
Il existe en fait des problèmes de performances significatifs et réellement fatals (tels que des délais de chargement de 30 secondes ou plus) sur les appareils mobiles lors de l'utilisation de OptimizeLegibility pour de longues pages. Ne l'appliquez que si vous connaissez la longueur maximale du texte. (Aussi, évitez de l'utiliser pour les clients Android, du moins sur les anciennes versions que tout le monde utilise encore: son moteur de rendu de polices a souvent des bogues très étranges lorsque ce mode est activé.)
J'ai fait des tests avec Instapaper pour déterminer les limites de performances approximatives de OptimizeLegibility. Un article de 5000 mots dans Instapaper pour iOS, par exemple, n'utilisera optimiserLegibility que sur les appareils dotés d'un processeur de classe A5 ou supérieur. Pour éviter les problèmes sur les anciens appareils iOS, je ne recommanderais pas d'utiliser OptimizeLegibility aveuglément et sans condition sur les pages de plus de 1000 mots environ. Et je ne recommanderais pas du tout de l'activer sur Android.
C'est tentant de faire:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Mais soyez extrêmement prudent à ce sujet, cela semble dangereux surtout lorsqu'il est appliqué à une page arbitraire.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Peut-être après Blink? | non | 2.3+? | 3+? |
Il existe différents bugs. Problème Android avec de nouvelles lignes. Chrome a divers, y compris l'espacement des lettres. Safari (et d'autres) par défaut pour optimiser la vitesse plutôt que de déterminer à la volée.