text-rendering

von 1 Mitwirkenden:

Zusammenfassung

Die text-rendering CSS-Eigenschaft liefert Informationen über die Prioritäten des Renderns von Text an die Rendering-Engine. Der Browser nutzt einen Kompromiss aus Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Text-rendering ist eine SVG-Eigenschaft, welche in keinem CSS-Standard definiert ist, jedoch lässt sie sich in Gecko- und WebKit-Browser unter Windows, Mac OS X und Linux auf HTML- und XML-Inhalte anwenden.

Einen deutlich sichtbaren Effekt erzielt optimizeLegibility, welches Ligaturen (ff, fi, fl, etc.) in einigen Fonts mit weniger als 20px ermöglicht (z.B. Microsofts Calibri, Candara, Constantia und Corbel oder die DejaVu-Font-Familie).

Syntax

Formale Grammatik:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision
text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision

text-rendering: inherit

Werte

auto
Der Browser entscheidet über Geschwindigkeits-, Lesbarkeits- und geometrische Präzisionsoptimierung während der Text gezeichnet wird. Die Unterschiede, wie der Browser die Werte interpretiert, stehen in der Kompatibilitätstabelle.
optimizeSpeed
Der Browser bevorzugt bei der Textdarstellung die Rendergeschwindigkeit vor der Lesbarkeit und geometrischer Präzision. Kerning und Ligaturen werden deaktiviert.
optimizeLegibility
Der Browser bevorzugt Lesbarkeit vor Rendergeschwindigkeit und geometrischer Präzision. Dabei werden Kerning und optional Ligaturen aktiviert.
geometricPrecision

Der Browser bevorzugt geometrische Präzision vor Rendergeschwindigkeit und Lesbarkeit. Spezielle Aspekte der Fonts — beispielweise Kerning — werden nicht linear skaliert; geometricPrecision kann Texte solcher Fonts besser aussehen lassen.

Wird in SVG ein Text größer oder kleiner skaliert, berechnet der Browser die endgültige Größe des Texts (welche durch die Font-Size mit angewandter Skalierung spezifiziert ist) und verlangt einen Font dieser Größe vom Fontsystem der Plattform. Wird jedoch eine Font-Size von, sagen wir, 9 mit Skalierung auf 140% verlangt, exisitiert die resultierende Font-Size von 12.6 nicht explizit im Fontsystem. Folglich rundet der Browser stattdessen die Font-Size auf 12, mit dem Ergebnis einer Treppenstufenskalierung des Texts.

Allerdings lässt sich der Text durch die geometricPrecision-Eigenschaft — sofern sie von der Render-Engine vollständig unterstützt wird — flüssig skalieren. Für große Skalierungsfaktoren ist das Ergebnis zwar weniger schön, dafür ist jedoch die Größe exakt so groß wie erwartet — weder auf- noch abgerundet zur nächstgelegenen Font-Size von Windows oder Linux.

WebKit verwendet präzise den spezifizierten Wert, Gecko hingegen behandelt den Wert wie optimizeLegibility.

Beispiele

/* Stelle sicher, dass alle Fonts im HTML-Dokument in ihrer ganzen
   Pracht dargestellt sind, aber vermeide inadequate Ligaturen in
   Elementen der Klasse foo */

body  { text-rendering: optimizeLegibility; }
.foo  { text-rendering: optimizeSpeed; }

Live-Beispiele

CSS-Code Kerning Ligaturem
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

Gecko-Notizen

Der 20px Schwellwert des keyword-Schlüsselworts kann durch Änderung der browser.display.auto_quality_min_font_size-Voreinstellung geändert werden.

Die -Option hat keinen Effekt in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), weil der Standardcode für das Textrendering bereits enorm schnell ist und derzeit keine schnellere Codealternative vorhanden ist. Siehe Bug 595688 für Details.

Spezifikationen

Spezifikation Status Kommentar
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Recommendation  

Dies ist eine SVG-Eigenschaft, welche in keinem CSS-Standard definiert ist. Gecko (Firefox) und WebKit wenden text-rendering weiterhin auf HTML- und XML-Inhalte an.

Browserkompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)

Allgemeine Unterstützung für Windows und Linux

4.0, aber die Implementierung beinhaltet Bugs unter Windows und Linux, welche die font substitition, small-caps, letter-spacing stören oder Textüberlappungen verursachen können.

3.0 (1.9) Not supported Not supported 5.0 (532.5)
Allgemeine Unterstützung in anderen Betriebssystemen Not supported Not supported Not supported Not supported Not supported
auto Chrome behandelt dies als optimizeSpeed.
Die Arbeiten an WebKit bug 41363 dauern an.

Ist die Font-Size größer als 20 px, so verwenden Gecko-Browser optimizeLegibility, für kleineren Text wird optimizeSpeed verwendet.

Not supported Not supported Safari behandelt dies als optimizeSpeed.
Die Arbeiten an WebKit bug 41363 dauern an.
geometricPrecision

13 unterstützt tatsächliche geometrische Präzision ohne Auf- oder Abrunden zur nächstgelegenen unterstützten Font-Size des Betriebssystems.
Eingeführt in WebKit 535.1   WebKit bug 60317

Gecko behandelt den Wert wie optimizeLegibility.  Not supported  Not supported  
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Allgemeine Unterstützung ? ? ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: powerswitch
Zuletzt aktualisiert von: powerswitch,
Seitenleiste ausblenden