mozilla
Your Search Results

    text-rendering

    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

    Document Tags and Contributors

    Contributors to this page:
    Last updated by: powerswitch,
    Hide Sidebar