text-rendering

Die CSS-Eigenschaft text-rendering ermöglicht es Ihnen, die Qualität des Textes gegenüber der Geschwindigkeit (oder umgekehrt) zu wählen, wodurch Sie die Optimierung fein abstimmen können, indem Sie dem Browser vorschlagen, wie er Text auf dem Bildschirm rendern soll. Anders ausgedrückt in MDN

Die CSS-Eigenschaft text-rendering liefert dem Rendering-Engine Informationen darüber, wofür bei der Darstellung von Text optimiert werden soll. Der Browser wählt Kompromisse zwischen Geschwindigkeit, Lesbarkeit und geometrischer Präzision.

Einige Vorher/Nachher-Beispiele finden Sie hier. Manchmal ist das Ergebnis einfach eine geradezu bessere Spationierung

Die Eigenschaft text-rendering ist nicht in einem CSS-Standard definiert. Es ist eigentlich eine SVG-Eigenschaft. Gecko/WebKit/Blink-Browser erlauben jedoch die Anwendung dieser Eigenschaft auf HTML-Elemente.

Beachten Sie, dass Windows, Linux und OS X jeweils (möglicherweise) unterschiedliche Text-Rendering-Engines haben. Ganz zu schweigen davon, dass verschiedene Browser ihre eigenen Standardeinstellungen für die Textdarstellung haben, sodass keine Garantie besteht, dass Ihre Schriftbehandlungen wie beabsichtigt auf dem System des Benutzers angezeigt werden. Weitere Informationen zu Schriftarten-Rendering-Systemen und Betriebssystemen finden Sie im Typekit-Blog.

Es gibt vier mögliche Werte

• auto (Standard) – Der Browser trifft fundierte Vermutungen darüber, wann für Geschwindigkeit, Lesbarkeit und geometrische Präzision optimiert werden soll, während Text gezeichnet wird. Beachten Sie, dass verschiedene Browser diesen Wert unterschiedlich interpretieren.
• optimizeSpeed – Der Browser legt beim Zeichnen von Text Wert auf die Rendering-Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision. Er deaktiviert Spationierung und Ligaturen.
• optimizeLegibility – Der Browser legt Wert auf Lesbarkeit gegenüber Rendering-Geschwindigkeit und geometrischer Präzision. Dies ermöglicht die Verwendung spezieller Spationierungs- und optionaler Ligaturinformationen, die für bestimmte Schriftarten in der Schriftartendatei enthalten sein können.
• geometricPrecision – Der Browser legt Wert auf geometrische Präzision gegenüber Rendering-Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriftarten – wie Spationierung – skalieren nicht linear, daher kann geometricPrecision Text mit diesen Schriftarten gut aussehen lassen. Wenn SVG-Schriftarten skaliert werden, berechnet der Browser die Pixelgröße und rundet dann auf die nächste ganze Zahl. Die Eigenschaft geometricPrecision ermöglicht eine flüssigere Skalierung. Hinweis: Nur WebKit-Browser wenden diesen flüssigen Wert an, Gecko behandelt den Wert genau wie optimizeLegibility.

< 20px aktiviert Ligaturen

Das Schlüsselwort optimizeLegibility aktiviert Ligaturen für Text unter 20 Pixel bei einigen Schriftarten. (wie Calibri oder DéjàVu) Dieser Schwellenwert von 20 Pixel kann in Gecko über die Benutzereinstellung browser.display.auto_quality_min_font_size geändert werden.

Ligaturen sind Kombinationen von Buchstaben, die besser aussehen und als kombiniertes Glyphen lesbarer sind. Ein Beispiel dafür sind die Buchstaben 'f' und 'i'. Sie können die Ligatur 'fi' bilden, wie im Wort 'find' (finden). Sie können mehr darüber erfahren.

Einige Schriftartendateien enthalten zusätzliche Informationen darüber, wie die Schriftart gerendert werden soll. optimizeLegibility nutzt diese Informationen, optimizeSpeed tut dies nicht.

Beispiel

p.legibility {
  text-rendering: optimizeLegibility;
}
p.speed {
  text-rendering: optimizeSpeed;
}

Performance

Wenn von einem Kompromiss zwischen Geschwindigkeit und Präzision die Rede ist, meinen sie es ernst. Es kann erhebliche Leistungsprobleme geben, die zu berücksichtigen sind. Dieser Artikel ist es wert, vollständig zitiert zu werden

Es gibt tatsächlich erhebliche, praktisch fatale Leistungsprobleme (wie Ladeverzögerungen von 30 Sekunden oder länger) auf Mobilgeräten bei der Verwendung von optimizeLegibility für lange Seiten. Wenden Sie es nur an, wenn Sie die maximale Textlänge kennen. (Vermeiden Sie es auch für Android-Clients, zumindest auf den älteren Versionen, die jeder noch verwendet: Deren Schriftarten-Renderer hat oft sehr seltsame Fehler, wenn dieser Modus aktiviert ist.)

Ich habe einige Tests mit Instapaper durchgeführt, um ungefähre optimizeLegibility-Leistungsgrenzen zu ermitteln. Ein Artikel mit 5.000 Wörtern in Instapaper für iOS verwendet beispielsweise optimizeLegibility nur auf Geräten mit einer CPU der A5-Klasse oder höher. Um Probleme auf älteren iOS-Geräten zu vermeiden, würde ich nicht empfehlen, optimizeLegibility blind und bedingungslos auf Seiten mit mehr als etwa 1.000 Wörtern zu verwenden. Und ich würde es überhaupt nicht für Android empfehlen.

Es ist verlockend, dies zu tun

/* Probably not advisable */
body {
  text-rendering: optimizeLegibility;
}

Aber seien Sie verdammt vorsichtig, das scheint besonders gefährlich, wenn es auf eine beliebige Seite angewendet wird.

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
4+	5+	3+	Vielleicht nach Blink?	Nein	2.3+?	3+?

Es gibt verschiedene Fehler. Android-Problem mit Zeilenumbrüchen. Chrome hat verschiedene, einschließlich Buchstabenspationierung. Safari (und andere) standardmäßig auf optimizeSpeed, anstatt sie dynamisch zu ermitteln.