`text-rendering` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Die text-rendering CSS Eigenschaft liefert dem Rendering-Engine Informationen darüber, worauf beim Rendern von Text optimiert werden soll.

Der Browser nutzt Kompromisse zwischen Geschwindigkeit, Lesbarkeit und geometrischer Präzision.

Hinweis: Die text-rendering Eigenschaft ist eine SVG-Eigenschaft, die in keinem CSS-Standard definiert ist. Allerdings erlauben Gecko- und WebKit-Browser, diese Eigenschaft auf HTML- und XML-Inhalte unter Windows, macOS und Linux anzuwenden.

Ein sehr sichtbarer Effekt ist optimizeLegibility, welches Ligaturen (ff, fi, fl, etc.) bei Text unter 20px für einige Schriftarten aktiviert (zum Beispiel Microsofts Calibri, Candara, Constantia und Corbel oder die DejaVu-Schriftfamilie).

Syntax

css

/* 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 Annahmen darüber, wann Text für Geschwindigkeit, Lesbarkeit und geometrische Präzision optimiert werden sollte. Für Unterschiede, wie dieser Wert vom Browser interpretiert wird, siehe die Kompatibilitätstabelle.

Der auto Wert ist eine gute Standardauswahl, um Qualität und Leistung auszugleichen, besonders für längere Texte.

optimizeSpeed

Der Browser betont die Rendering-Geschwindigkeit über Lesbarkeit und geometrische Präzision bei der Textdarstellung. Es deaktiviert Kerning und Ligaturen.

Der optimizeSpeed Wert ist vorzuziehen in ressourcenbeschränkten Rendering-Szenarien, wie zum Beispiel bei langsamen Prozessoren oder geringer Akkuleistung.

optimizeLegibility

Der Browser betont die Lesbarkeit über die Rendering-Geschwindigkeit und geometrische Präzision. Dies ermöglicht Kerning und optionale Ligaturen.

Der optimizeLegibility Wert ist vorzuziehen für Texte, die großformatig, aber inhaltsarm sind, wie zum Beispiel Überschriften oder Banner, um ihre Lesbarkeit zu verbessern. Er könnte auch für hochwertige professionelle Typografie verwendet werden, wie veröffentlichte Artikel. Es wird nicht für typische Artikel empfohlen aufgrund potenzieller Leistungseinbußen.

geometricPrecision

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

In SVG, wenn Text vergrößert oder verkleinert wird, berechnen Browser die endgültige Größe des Textes (die durch die angegebene Schriftgröße und den angewendeten Maßstab bestimmt wird) und verlangen eine Schriftart dieser berechneten Größe vom Schriftsystem der Plattform. Aber wenn Sie eine Schriftgröße von sagen wir 9 mit einem Maßstab von 140% anfordern, existiert die resultierende Schriftgröße von 12,6 im Schriftsystem nicht explizit, sodass der Browser die Schriftgröße auf 12 rundet. Dies führt zu einer Treppenstufen-Skalierung von Text.

Aber die geometricPrecision Eigenschaft – wenn sie vollständig vom Rendering-Engine unterstützt wird – lässt Sie Ihren Text fließend skalieren. Bei großen Skalierungsfaktoren sehen Sie möglicherweise weniger schöne Textrenderings, aber die Größe ist, wie Sie sie erwarten würden – weder hoch- noch heruntergerundet zur nächstunterstützten Schriftgröße von Windows oder Linux.

Der geometricPrecision Wert optimiert weder Lesbarkeit noch Leistung. Er macht meist in SVG Sinn, wo Sie möchten, dass Ihre Grafik getreu skaliert, ohne die Textdimensionen zu verzerren.

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

Formale Definition

Anfangswert	`auto`
Anwendbar auf	Textelemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

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

html

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

CSS

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 dem Erscheinungsbild von optimizeSpeed und optimizeLegibility (in Ihrem Browser; andere Browser können abweichen).

HTML

html

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

CSS

css

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

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