---
title: text-rendering
slug: Web/CSS/text-rendering
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Text
  - NeedsLiveSample
  - NeedsMobileBrowserCompatibility
  - Referenz
  - SVG
translation_of: Web/CSS/text-rendering
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <strong><code>text-rendering</code></strong> CSS Eigenschaft liefert der Renderingengine Informationen darüber, wie die Darstellung von Text optimiert werden soll.</p>

<p>Der Browser macht Abstriche bezüglich Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Die <code>text-rendering</code> Eigenschaft ist eine SVG Eigenschaft, die in keinem CSS Standard definiert ist. Jedoch erlauben Gecko und WebKit Browser es unter Windows, Mac OS X und Linux, diese Eigenschaft auf HTML und XML Inhalte anzuwenden.</p>

<p>Ein offensichtlicher Effekt ist <code>optimizeLegibility</code>, welches Ligaturen (ff, fi, fl etc.) in Text kleiner als 20px für einige Schriftarten aktiviert (zum Beispiel Microsofts <em>Calibri</em>, <em>Candara</em>, <em>Constantia</em> und <em>Corbel</em> oder die <em>DejaVu</em> Schriftfamilie).</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">/* Schlüsselwortwerte */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Globale Werte */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>Der Browser bestimmt, wann auf Geschwindigkeit, Lesbarkeit oder geometrische Präzision optimiert werden soll, wenn Text gezeichnet wird. Für Unterschiede, wie dieser Wert von den Browser interpretiert wird, siehe die Kompatibilitätstabelle.</dd>
 <dt><code>optimizeSpeed</code></dt>
 <dd>Der Browser betont Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies deaktiviert Unterschneidung und Ligaturen.</dd>
 <dt><code>optimizeLegibility</code></dt>
 <dd>Der Browser betont Lesbarkeit gegenüber Geschwindigkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies aktiviert Unterschneidung und optionale Ligaturen.</dd>
 <dt><code>geometricPrecision</code></dt>
 <dd>
 <p>Der Browser betont geometrischer Präzision gegenüber Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriften — wie Unterschneidung — skalieren nicht linear. Daher erlaubt es dieser Wert, Text in diesen Schriften gut aussehen zu lassen.</p>

 <p>Wenn Text in SVG hoch- oder runterskaliert wird, berechnen Browser die finale Größe des Texts (welche durch die angegebene Schriftgröße und die Skalierung bestimmt wird) und fordern eine Schriftart dieser berechneten Größe vom Schriftsystem der Plattform an. Aber falls eine Schriftgröße von beispielsweise 9 mit einer Skalierung von 140% angefordert wird, existiert die sich ergebende Schriftgröße von 12.6 nicht explizit im Schriftsystem, sodass der Browser stattdessen die Schriftgröße auf 12 abrundet. Dies resultiert in einer schrittweisen Skalierung von Text.</p>

 <p>Der <code>geometricPrecision</code> Wert — falls von der Renderingengine vollständig unterstützt — erlaubt es, Text übergangslos zu skalieren. Große Skalierungsfaktoren können eine weniger schöne Textdarstellung zur Folge haben, aber die Größe ist, was erwartet wird — weder auf- noch abgerundet auf die nächstmögliche Schriftgröße, die von Windows oder Linux unterstützt wird.</p>

 <p class="note"><strong>Hinweis</strong>: WebKit wendet exakt den angegebenen Wert an, aber Gecko behandelt den Wert genauso wie <code>optimizeLegibility</code>.</p>
 </dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush:css">/* stellt sicher, dass alle Schriften innerhalb des HTML Dokuments in all ihrer Pracht dargestellt werden,
   aber verhindert unangemessene Ligaturen in Elementen mit der Klasse 'foo' */

body {
  text-rendering: optimizeLegibility;
}

.foo {
  text-rendering: optimizeSpeed;
}</pre>

<h3 id="Livebeispiele">Livebeispiele</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th>CSS Code</th>
   <th>Unterschneidung</th>
   <th>Ligaturen</th>
  </tr>
  <tr style="font: 19.9px 'DejaVu Serif', Constantia;">
   <td style="font: medium monospace;">font: 19.9px 'DejaVu Serif', Constantia;</td>
   <td>LYoWAT</td>
   <td>ff fi fl ffl</td>
  </tr>
  <tr style="font: 20px 'DejaVu Serif', Constantia;">
   <td style="font: medium monospace;">font: 20px 'DejaVu Serif', Constantia;</td>
   <td>LYoWAT</td>
   <td>ff fi fl ffl</td>
  </tr>
  <tr style="font: 3em 'DejaVu Serif', Constantia; text-rendering: optimizeSpeed;">
   <td style="font: medium monospace;">font: 3em 'DejaVu Serif', Constantia;<br>
    text-rendering: optimizeSpeed;</td>
   <td>LYoWAT</td>
   <td>ff fi fl ffl</td>
  </tr>
  <tr style="font: 3em 'Dejavu Serif', Constantia; text-rendering: optimizeLegibility;">
   <td style="font: medium monospace;">font: 3em 'Dejavu Serif', Constantia;<br>
    text-rendering: optimizeLegibility;</td>
   <td>LYoWAT</td>
   <td>ff fi fl ffl</td>
  </tr>
 </tbody>
</table>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.properties.text-rendering")}}