text-rendering

Syntax

/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: revert;
text-rendering: revert-layer;
text-rendering: unset;

Werte

auto

Der Browser trifft fundierte Vermutungen darüber, wann auf Geschwindigkeit, Lesbarkeit und geometrische Präzision beim Zeichnen von Text optimiert werden soll. Für Unterschiede, wie dieser Wert vom Browser interpretiert wird, siehe die Kompatibilitätstabelle.

Der auto-Wert ist eine gute Standardeinstellung für die Balance zwischen Qualität und Leistung, insbesondere für längere Textabschnitte in normalem Text.

optimizeSpeed

Der Browser legt beim Zeichnen von Text mehr Wert auf Rendergeschwindigkeit als auf Lesbarkeit und geometrische Präzision. Es deaktiviert Kerning und Ligaturen.

Der optimizeSpeed-Wert ist in ressourcenbeschränkten Rendering-Szenarien vorzuziehen, wie langsamen Prozessoren oder bei niedriger Batterieleistung.

optimizeLegibility

Der Browser legt beim Rendern mehr Wert auf Lesbarkeit als auf Geschwindigkeit und geometrische Präzision. Dies aktiviert Kerning und optionale Ligaturen.

Der optimizeLegibility-Wert ist vorzuziehen für Texte, die groß sind, aber inhaltlich kurz, wie Überschriften oder Banner, um deren Lesbarkeit zu verbessern. Er könnte auch für hochwertige professionelle Typografie wie veröffentlichte Artikel verwendet werden. Für typische Artikel wird er aufgrund möglicher Leistungseinbußen nicht empfohlen.

geometricPrecision

Der Browser betont geometrische Präzision gegenüber Rendergeschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriftarten – wie Kerning – skalieren nicht linear. Daher kann dieser Wert Text, der diese Schriftarten verwendet, gut aussehen lassen.

In SVG wird bei einer Skalierung von Texten die endgültige Größe des Textes (die durch die angegebene Schriftgröße und die angewandte Skalierung bestimmt wird) berechnet, und es wird eine Schrift der errechneten Größe vom Font-System der Plattform angefragt. Wenn jedoch eine Schriftgröße von 9 mit einer Skalierung von 140% angefordert wird, existiert die resultierende Schriftgröße von 12,6 im Font-System nicht explizit, sodass der Browser die Schriftgröße auf 12 abrundet. Dies führt zu einer stufenweisen Skalierung des Textes.

Aber die geometricPrecision-Eigenschaft – wenn sie vollständig von der Rendering-Engine unterstützt wird – ermöglicht es Ihnen, Ihren Text fließend zu skalieren. Bei großen Skalierungsfaktoren könnten Sie weniger schöne Textdarstellungen sehen, aber die Größe ist so, wie Sie es erwarten würden – weder abgerundet noch auf die nächste von Windows oder Linux unterstützte Schriftgröße aufgerundet.

Der geometricPrecision-Wert optimiert weder Lesbarkeit noch Performance. Er macht in der Regel in SVG Sinn, wo Sie möchten, dass Ihre Grafik originalgetreu skaliert wird, ohne die Textdimensionen zu verzerren.

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

Formale Definition

Formale Syntax

text-rendering = 
  auto                |
  optimizeSpeed       |
  optimizeLegibility  |
  geometricPrecision  

Beispiele

Automatische Anwendung von optimizeLegibility

Dies zeigt, 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

optimizeSpeed vs. optimizeLegibility

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Text in einem <canvas> zeichnen

• CSS Text Decoration CSS-Modul

• Verwandte CSS-Eigenschaften

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

• Der SVG text-rendering-Attribut

• SVG und CSS