text-rendering
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die text-rendering
CSS Eigenschaft liefert dem Rendering-Engine Informationen darüber, worauf bei der Wiedergabe von Text optimiert werden soll.
Der Browser geht Kompromisse zwischen Geschwindigkeit, Lesbarkeit und geometrischer Präzision ein.
Hinweis: Die text-rendering
Eigenschaft ist eine SVG-Eigenschaft, die in keinem CSS-Standard definiert ist. Gecko- und WebKit-Browser erlauben jedoch die Anwendung dieser Eigenschaft auf HTML- und XML-Inhalte unter Windows, macOS und Linux.
Ein sehr sichtbarer Effekt ist optimizeLegibility
, was Ligaturen (ff, fi, fl usw.) in Text unter 20px für einige Schriftarten aktiviert (z. B. Microsofts Calibri, Candara, Constantia und Corbel oder die DejaVu Schriftfamilie).
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 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
.
Formale Definition
Initialer Wert | auto |
---|---|
Anwendbar auf | Textelemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Automatische Anwendung von optimizeLegibility
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
optimizeSpeed vs. optimizeLegibility
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
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextRenderingProperty |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
-
CSS Text Decoration CSS-Modul
-
Verwandte CSS-Eigenschaften
text-decoration
(und dessen Langform-Eigenschaften, wietext-decoration-line
,text-decoration-style
, undtext-decoration-thickness
)text-emphasis
(und dessen Langform-Eigenschaften, einschließlichtext-emphasis-color
,text-emphasis-position
, undtext-emphasis-style
)text-shadow
text-transform
-
Das SVG
text-rendering
Attribut