text-rendering

auto

Der Browser trifft fundierte Annahmen darüber, wann Geschwindigkeit, Lesbarkeit und geometrische Präzision beim Zeichnen von Text optimiert werden sollten. Für Unterschiede in der Interpretation dieses Wertes durch den Browser, siehe die Kompatibilitätstabelle.

optimizeSpeed

Der Browser betont die Darstellungsgeschwindigkeit über Lesbarkeit und geometrische Präzision beim Zeichnen von Text. Es werden Kerning und Ligaturen deaktiviert.

optimizeLegibility

Der Browser betont die Lesbarkeit über Darstellungsgeschwindigkeit und geometrische Präzision. Dies aktiviert Kerning und optionale Ligaturen.

geometricPrecision

Der Browser betont die geometrische Präzision über Darstellungsgeschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriften — wie Kerning — skalieren nicht linear. Dieser Wert kann den Text jedoch mit diesen Schriften gut aussehen lassen.

In SVG kalkulieren Browser beim Hoch- oder Runterskalieren von Text die endgültige Größe des Textes (die durch die angegebene Schriftgröße und die angewandte Skalierung bestimmt wird) und fordern eine Schrift dieser berechneten Größe aus dem Schriftsystem der Plattform an. Wenn Sie jedoch eine Schriftgröße von, sagen wir, 9 mit einer Skalierung von 140% anfordern, existiert die resultierende Schriftgröße von 12,6 nicht explizit im Schriftsystem, sodass der Browser die Schriftgröße stattdessen auf 12 rundet. Dies führt zu treppenförmiger Skalierung des Textes.

Aber die geometricPrecision Eigenschaft — wenn sie vom Rendering-Engine vollständig unterstützt wird — ermöglicht ein fließendes Skalieren Ihres Textes. Für große Skalierungsfaktoren kann es zu weniger schönen Textwiedergaben kommen, aber die Größe entspricht dem, was Sie erwarten würden — weder auf- noch abgerundet auf die nächstgelegene Schriftgröße, die Windows oder Linux unterstützt.

Hinweis: WebKit wendet den angegebenen Wert präzise an, aber Gecko behandelt den Wert wie optimizeLegibility.

text-rendering = 
  auto                |
  optimizeSpeed       |
  optimizeLegibility  |
  geometricPrecision  

Dies demonstriert, wie optimizeLegibility von Browsern automatisch verwendet wird, wenn die font-size kleiner als 20px ist.

HTML

<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>

CSS

.small {
  font:
    19.9px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
.big {
  font:
    20px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

Ergebnis

Dieses Beispiel zeigt den Unterschied zwischen der Darstellung von optimizeSpeed und optimizeLegibility (in Ihrem Browser; andere Browser können variieren).

HTML

<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>

CSS

p {
  font:
    1.5em "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

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

Ergebnis

• Text in einem <canvas> zeichnen

• CSS Text Decoration CSS-Modul

• Verwandte CSS-Eigenschaften

  • text-decoration (und dessen Langform-Eigenschaften, wie text-decoration-line, text-decoration-style, und text-decoration-thickness)
  • text-emphasis (und dessen Langform-Eigenschaften, einschließlich text-emphasis-color, text-emphasis-position, und text-emphasis-style)
  • text-shadow
  • text-transform

• Das SVG text-rendering Attribut

• SVG und CSS