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, was beim Rendern von Text optimiert werden soll.
Der Browser trifft Abwägungen zwischen Geschwindigkeit, Lesbarkeit und geometrischer Präzision.
Hinweis:
Die text-rendering
Eigenschaft ist eine SVG-Eigenschaft, die in keinem CSS-Standard definiert ist. Gecko- und WebKit-Browser ermöglichen es jedoch, diese Eigenschaft auf HTML- und XML-Inhalte unter Windows, macOS und Linux anzuwenden.
Ein sehr sichtbarer Effekt ist optimizeLegibility
, das Ligaturen (ff, fi, fl, etc.) in Texten kleiner als 20px für einige Schriftarten aktiviert (zum Beispiel 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 Vermutungen darüber, wann er beim Zeichnen von Texten Geschwindigkeit, Lesbarkeit und geometrische Präzision optimieren 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 einfache Texte. optimizeSpeed
-
Der Browser legt den Schwerpunkt auf Rendering-Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision beim Zeichnen von Text. Es deaktiviert Kerning und Ligaturen.
Der
optimizeSpeed
-Wert ist in situationsbezogenen Rendering-Szenarien mit begrenzten Ressourcen wie langsamen Prozessoren oder geringem Akkustand vorzuziehen. optimizeLegibility
-
Der Browser legt den Schwerpunkt auf Lesbarkeit gegenüber Rendering-Geschwindigkeit und geometrischer Präzision. Dies aktiviert Kerning und optionale Ligaturen.
Der
optimizeLegibility
-Wert ist vorzuziehen für Texte, die groß sind, aber einen kurzen Inhalt haben, wie z.B. Überschriften oder Banner, um deren Lesbarkeit zu verbessern. Er könnte auch für hochwertige professionelle Typographie wie veröffentlichte Artikel verwendet werden. Er wird nicht für typische Artikel empfohlen, da er potenzielle Leistungseinbußen verursachen könnte. geometricPrecision
-
Der Browser legt den Schwerpunkt auf geometrische Präzision gegenüber Rendering-Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriftarten — wie das Kerning — skalieren nicht linear. So kann dieser Wert den Text dieser Schriftarten gut aussehen lassen.
In SVG, wenn Text skaliert wird, berechnen Browser die endgültige Größe des Textes (die durch die angegebene Schriftgröße und den angewendeten Maßstab bestimmt wird) und fordern eine Schriftart dieser berechneten Größe vom Fontsystem der Plattform an. Aber wenn Sie eine Schriftgröße von beispielsweise 9 mit einem Maßstab von 140% anfordern, existiert die resultierende Schriftgröße von 12,6 nicht explizit im Fontsystem, sodass der Browser die Schriftgröße stattdessen auf 12 rundet. Dies führt zu einer Treppenskalenwirkung des Textes.
Aber die
geometricPrecision
-Eigenschaft — wenn sie vom Rendering-Engine vollständig unterstützt wird — ermöglicht es Ihnen, Ihren Text flüssig zu skalieren. Für große Skalierungsfaktoren sehen Sie möglicherweise eine weniger schöne Textrendering, aber die Größe wird erwartungsgemäß weder nach oben noch nach unten auf die nächste vom Windows oder Linux unterstützte Schriftgröße gerundet.Der
geometricPrecision
-Wert optimiert weder die Lesbarkeit noch die Leistung. Er macht meist in SVG Sinn, wo Sie möchten, dass Ihre Grafik treu skaliert wird, ohne die Textdimensionen zu verzerren.Hinweis: WebKit wendet den angegebenen Wert genau an, aber Gecko behandelt den Wert wie
optimizeLegibility
.
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | Textelemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Automatische Anwendung von optimizeLegibility
Dies demonstriert, wie optimizeLegibility
automatisch von Browsern 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 dem Aussehen 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
Siehe auch
-
CSS Text Decoration CSS-Modul
-
Verwandte CSS-Eigenschaften
text-decoration
(und seine Langform-Eigenschaften, wietext-decoration-line
,text-decoration-style
undtext-decoration-thickness
)text-emphasis
(und seine Langform-Eigenschaften, einschließlichtext-emphasis-color
,text-emphasis-position
undtext-emphasis-style
)text-shadow
text-transform
-
Das SVG
text-rendering
Attribut