Mit der text-renderingEigenschaft in CSS können Sie die Textqualität über die Geschwindigkeit (oder umgekehrt) auswählen und so die Optimierung optimieren, indem Sie dem Browser vorschlagen, wie Text auf dem Bildschirm gerendert werden soll. Anders gesagt in MDN:
Die
text-renderingCSS-Eigenschaft bietet der Rendering-Engine Informationen darüber, was beim Rendern von Text optimiert werden soll. Der Browser macht Kompromisse zwischen Geschwindigkeit, Lesbarkeit und geometrischer Präzision.
Sie können hier einige Vorher / Nachher-Beispiele sehen. Manchmal ist das Ergebnis einfach ein besseres Kerning:
Einige Schriftdateien enthalten zusätzliche Informationen darüber, wie die Schrift gerendert werden soll. optimizeLegibilitynutzt diese Informationen und optimizeSpeednicht.
Beispiel
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Performance
Wenn gesagt wird, dass es einen Kompromiss zwischen Geschwindigkeit und Präzision gibt, machen sie keine Witze. Es können erhebliche Leistungsprobleme zu berücksichtigen sein. Dieser Artikel ist es wert, vollständig zitiert zu werden:
Bei der Verwendung von optimizeLegibility für lange Seiten treten auf Mobilgeräten erhebliche, effektiv schwerwiegende Leistungsprobleme auf (z. B. Ladeverzögerungen von 30 Sekunden oder länger). Wenden Sie es nur an, wenn Sie die maximale Textlänge kennen. (Vermeiden Sie es auch, es für Android-Clients zu verwenden, zumindest nicht für ältere Versionen, die noch von allen verwendet werden: Der Schriftrenderer weist häufig sehr seltsame Fehler auf, wenn dieser Modus aktiviert ist.)
Ich habe einige Tests mit Instapaper durchgeführt, um ungefähre Leistungsgrenzen für optimizeLegibility zu ermitteln. In einem Artikel mit 5.000 Wörtern in Instapaper für iOS wird beispielsweise optimizeLegibility nur auf Geräten mit einer CPU der A5-Klasse oder höher verwendet. Um Probleme auf älteren iOS-Geräten zu vermeiden, würde ich nicht empfehlen, optimizeLegibility blind und bedingungslos auf Seiten zu verwenden, die länger als etwa 1.000 Wörter sind. Und ich würde nicht empfehlen, es überhaupt auf Android zu aktivieren.
Es ist verlockend zu tun:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Aber seien Sie verdammt vorsichtig, scheint gefährlich, besonders wenn es auf eine beliebige Seite angewendet wird.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Vielleicht nach dem Blinken? | Nee | 2,3+? | 3+? |
Es gibt verschiedene Fehler. Android-Problem mit neuen Zeilen. Chrome hat verschiedene, einschließlich Buchstabenabstand. Safari (und andere) optimieren standardmäßig die Geschwindigkeit, anstatt sie im laufenden Betrieb zu bestimmen.