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.

Das text-rendering-Attribut gibt dem Renderer Hinweise darauf, welche Kompromisse beim Rendern von Text zu machen sind.

Hinweis: Als Präsentationsattribut hat text-rendering auch ein entsprechendes CSS-Eigenschafts-Pendant: text-rendering. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

<text>

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 140 40" xmlns="http://www.w3.org/2000/svg">
  <text y="15" text-rendering="geometricPrecision">Geometric precision</text>
  <text y="35" text-rendering="optimizeLegibility">Optimized legibility</text>
</svg>

Anwendungshinweise

Wert	`auto` \| `optimizeSpeed` \| `optimizeLegibility` \| `geometricPrecision`
Standardwert	`auto`
Animierbar	diskret

auto: Dieser Wert gibt an, dass der User-Agent geeignete Kompromisse eingeht, um Geschwindigkeit, Lesbarkeit und geometrische Präzision auszugleichen, wobei Lesbarkeit eine höhere Priorität als Geschwindigkeit und geometrische Präzision eingeräumt wird.
optimizeSpeed: Dieser Wert gibt an, dass der User-Agent die Rendergeschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision bevorzugt. Diese Option kann dazu führen, dass einige User-Agents das Text-Anti-Aliasing deaktivieren.
optimizeLegibility: Dieser Wert gibt an, dass der User-Agent die Lesbarkeit gegenüber Rendergeschwindigkeit und geometrischer Präzision bevorzugt. In der Regel entscheidet der User-Agent, ob Anti-Aliasing-Techniken, integrierte Schriftanpassung oder beides verwendet werden, um den lesbarsten Text zu erzeugen.
geometricPrecision: Dieser Wert gibt an, dass der User-Agent die geometrische Präzision gegenüber Lesbarkeit und Rendergeschwindigkeit bevorzugt. Diese Option sorgt normalerweise dafür, dass der User-Agent auf Schriftanpassung verzichtet, sodass die Glyphen-Umrisse mit ähnlicher geometrischer Präzision wie die Darstellung von Pfaddaten gezeichnet werden.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # TextRenderingProperty

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

CSS text-rendering-Eigenschaft