Übersicht

Die text-rendering CSS Eigenschaft liefert der Renderingengine Informationen darüber, wie die Darstellung von Text optimiert werden soll.

Der Browser macht Abstriche bezüglich Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Die text-rendering Eigenschaft ist eine SVG Eigenschaft, die in keinem CSS Standard definiert ist. Jedoch erlauben Gecko und WebKit Browser es unter Windows, Mac OS X und Linux, diese Eigenschaft auf HTML und XML Inhalte anzuwenden.

Ein offensichtlicher Effekt ist optimizeLegibility, welches Ligaturen (ff, fi, fl etc.) in Text kleiner als 20px für einige Schriftarten aktiviert (zum Beispiel Microsofts Calibri, Candara, Constantia und Corbel oder die DejaVu Schriftfamilie).

Initialwertauto
Anwendbar aufTextelemente
VererbtJa
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Globale Werte */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;

Werte

auto
Der Browser bestimmt, wann auf Geschwindigkeit, Lesbarkeit oder geometrische Präzision optimiert werden soll, wenn Text gezeichnet wird. Für Unterschiede, wie dieser Wert von den Browser interpretiert wird, siehe die Kompatibilitätstabelle.
optimizeSpeed
Der Browser betont Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies deaktiviert Unterschneidung und Ligaturen.
optimizeLegibility
Der Browser betont Lesbarkeit gegenüber Geschwindigkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies aktiviert Unterschneidung und optionale Ligaturen.
geometricPrecision

Der Browser betont geometrischer Präzision gegenüber Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriften — wie Unterschneidung — skalieren nicht linear. Daher erlaubt es dieser Wert, Text in diesen Schriften gut aussehen zu lassen.

Wenn Text in SVG hoch- oder runterskaliert wird, berechnen Browser die finale Größe des Texts (welche durch die angegebene Schriftgröße und die Skalierung bestimmt wird) und fordern eine Schriftart dieser berechneten Größe vom Schriftsystem der Plattform an. Aber falls eine Schriftgröße von beispielsweise 9 mit einer Skalierung von 140% angefordert wird, existiert die sich ergebende Schriftgröße von 12.6 nicht explizit im Schriftsystem, sodass der Browser stattdessen die Schriftgröße auf 12 abrundet. Dies resultiert in einer schrittweisen Skalierung von Text.

Der geometricPrecision Wert — falls von der Renderingengine vollständig unterstützt — erlaubt es, Text übergangslos zu skalieren. Große Skalierungsfaktoren können eine weniger schöne Textdarstellung zur Folge haben, aber die Größe ist, was erwartet wird — weder auf- noch abgerundet auf die nächstmögliche Schriftgröße, die von Windows oder Linux unterstützt wird.

Hinweis: WebKit wendet exakt den angegebenen Wert an, aber Gecko behandelt den Wert genauso wie optimizeLegibility.

Formale Syntax

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Beispiele

/* stellt sicher, dass alle Schriften innerhalb des HTML Dokuments in all ihrer Pracht dargestellt werden,
   aber verhindert unangemessene Ligaturen in Elementen mit der Klasse 'foo' */

body {
  text-rendering: optimizeLegibility;
}

.foo {
  text-rendering: optimizeSpeed;
}

Livebeispiele

CSS Code Unterschneidung Ligaturen
font: 19.9px 'DejaVu Serif', Constantia; LYoWAT ff fi fl ffl
font: 20px 'DejaVu Serif', Constantia; LYoWAT ff fi fl ffl
font: 3em 'DejaVu Serif', Constantia;
text-rendering: optimizeSpeed;
LYoWAT ff fi fl ffl
font: 3em 'Dejavu Serif', Constantia;
text-rendering: optimizeLegibility;
LYoWAT ff fi fl ffl

Spezifikationen

Spezifikation Status Kommentar
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Die Definition von 'text-rendering' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
text-rendering
Nicht standardisiert
Chrome Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise This property is only supported on Windows and Linux.
Hinweise Initial versions had bugs on Windows and Linux that broke font substitition, small-caps, letter-spacing or caused text to overlap.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise This property is only supported on Windows and Linux.
Hinweise The optimizeSpeed option has no effect on Firefox 4 because the standard code for text rendering is already fast and there is not a faster code path at this time. See bug 595688 for details.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Vollständige Unterstützung 5WebView Android Vollständige Unterstützung 3
Hinweise
Vollständige Unterstützung 3
Hinweise
Hinweise From version 3 to 4.3, there is a serious bug where text-rendering: optimizeLegibility causes custom web fonts to not render. This was fixed in version 4.4.
Chrome Android Vollständige Unterstützung 18
Hinweise
Vollständige Unterstützung 18
Hinweise
Hinweise This property is only supported on Windows and Linux.
Hinweise Initial versions had bugs on Windows and Linux that broke font substitition, small-caps, letter-spacing or caused text to overlap.
Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 46Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 4.3Samsung Internet Android ?
auto
Nicht standardisiert
Chrome Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Chrome treats auto as optimizeSpeed.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise If the font size is 20 pixels or higher, Firefox treats auto as optimizeLegibility. For smaller text, Firefox treats auto as optimizeSpeed. The 20-pixel threshold can be changed with the browser.display.auto_quality_min_font_size preference.
IE Keine Unterstützung NeinOpera ? Safari Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Safari treats auto as optimizeSpeed. See WebKit bug 41363.
WebView Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Chrome treats auto as optimizeSpeed.
Chrome Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Chrome treats auto as optimizeSpeed.
Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
geometricPrecision
Nicht standardisiert
Chrome Vollständige Unterstützung 13
Hinweise
Vollständige Unterstützung 13
Hinweise
Hinweise Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Firefox treats geometricPrecision the same as optimizeLegibility.
IE Keine Unterstützung NeinOpera ? Safari ? WebView Android Vollständige Unterstützung 37
Hinweise
Vollständige Unterstützung 37
Hinweise
Hinweise Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.
Chrome Android Vollständige Unterstützung 18
Hinweise
Vollständige Unterstützung 18
Hinweise
Hinweise Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.
Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, Sebastianz, powerswitch
Zuletzt aktualisiert von: mdnwebdocs-bot,