CSS text-rendering Eigenschaft

Die CSS-Eigenschaft text-rendering teilt der Rendering-Engine des Browsers mit, worauf sie beim Zeichnen von Text optimieren soll: rohe Zeichengeschwindigkeit, bestmögliche Lesbarkeit oder geometrische Präzision. In der Praxis ist es ein Hinweis, mit dem Sie Schriftmerkmale wie Kerning (Anpassung des Abstands zwischen bestimmten Buchstabenpaaren) und Ligaturen (Zusammenfassen von Zeichen wie fi zu einem einzelnen Glyph) ein- oder ausschalten können.

Diese Seite erklärt, was jeder Wert bewirkt, wann es sinnvoll ist, ihn zu setzen, welche Fallstricke es gibt und ausführbare Beispiele, die Sie direkt vergleichen können.

Wann brauche ich das?

Für die meisten Seiten benötigen Sie text-rendering nie — auto liefert bereits ein vernünftiges Ergebnis. Sie greifen darauf in zwei Situationen zurück:

Großer, markanter Text (Überschriften, Hero-Titel, Logos), bei dem gutes Kerning und Ligaturen das Erscheinungsbild spürbar verbessern. optimizeLegibility ist der richtige Wert dafür.
Lange, leistungssensitive Seiten mit viel Text auf schwachbrüstigen Geräten, bei denen Sie den zusätzlichen typografischen Aufwand einsparen möchten. Dafür ist optimizeSpeed gedacht.

Die Eigenschaft text-rendering hat vier Schlüsselwortwerte:

auto — der Browser entscheidet (die Voreinstellung).
optimizeSpeed — Zeichengeschwindigkeit bevorzugen; Kerning und Ligaturen sind deaktiviert.
optimizeLegibility — Lesbarkeit bevorzugen; Kerning und Ligaturen sind aktiviert.
geometricPrecision — geometrische Präzision bevorzugen, damit Text glatt skaliert werden kann.

Wenn text-rendering auf optimizeLegibility gesetzt ist, priorisiert der Browser die Lesbarkeit, indem er Kerning und Ligaturen aktiviert. Der Kompromiss ist die Leistung: Bei einer Seite mit einer großen Textmenge kann das Erzwingen von Lesbarkeit das Rendering messbar verlangsamen. Wenden Sie es daher gezielt an und nicht auf body.

Wenn Sie statt eines breiten Hinweises eine feingranulare Kontrolle über einzelne typografische Merkmale wünschen, verwenden Sie die dedizierten Eigenschaften font-kerning, font-variant-ligatures oder font-feature-settings.

Die Eigenschaft text-rendering stammt ursprünglich aus SVG, ist aber nun in den Spezifikationen CSS Text Module Level 3 und Level 4 enthalten. Gecko-basierte (Firefox) und WebKit/Blink-basierte (Safari, Chrome) Browser erlauben die Anwendung auf HTML-Inhalte via CSS. Da es sich nicht überall um eine standardisierte CSS-Eigenschaft handelt, sollten Sie sie als Progressive Enhancement behandeln: Die Seite muss auch dann noch gut aussehen, wenn der Browser sie ignoriert.

Anfangswert	auto
Gilt für	Textelemente.
Vererbbar	Ja.
Animierbar	Ja.
Version	Scalable Vector Graphics (SVG) 1.1
DOM-Syntax	object.style.textRendering = "optimizeLegibility";

Syntax

CSS text-rendering Werte

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | initial | inherit;

Beispiel der text-rendering Eigenschaft:

CSS text-rendering Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      hr {
        margin: 60px 0;
      }
      table {
        table-layout: fixed;
        padding: .3em;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        margin-bottom: 1em;
      }
      td {
        padding: 15px;
        border: 1px solid #eee;
      }
      h3 {
        font-size: 5em;
        line-height: 1;
        font-family: sans-serif;
      }
      .uppercase {
        text-transform: uppercase;
      }
      .italic {
        font-style: italic;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .optimizeLegibility {
        text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <h2>Text-rendering example</h2>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="uppercase">LOREM</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility uppercase">LOREM</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3>Ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility">Ipsum</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="italic">lorem ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility italic">lorem ipsum</h3>
        </td>
      </tr>
    </table>
  </body>
</html>

Probier es selbst »

Der Unterschied zwischen "optimizeSpeed" und "optimizeLegibility"

Das folgende Beispiel zeigt den Unterschied zwischen den Werten optimizeSpeed und optimizeLegibility. Am deutlichsten ist der Effekt bei Buchstabenpaaren, die von Kerning und Ligaturen profitieren (wie AV, Wa oder fi). Bedenken Sie, dass das Ergebnis je nach Browser variieren kann und bei Text, der ohnehin gut gerendert wird, möglicherweise kein sichtbarer Unterschied erkennbar ist:

Beispiel der text-rendering Eigenschaft mit den Werten "optimizeSpeed" und "optimizeLegibility":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 1.5em;
        color: #777777;
      }
      .optimize-speed {
        text-rendering: optimizeSpeed;
      }
      .optimize-legibility {
        text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <p class="optimize-speed">AVADA Waffle — fi fl ffi (optimizeSpeed)</p>
    <p class="optimize-legibility">AVADA Waffle — fi fl ffi (optimizeLegibility)</p>
  </body>
</html>

Probier es selbst »

Worauf Sie achten sollten

Es ist ein Hinweis, keine Garantie. Browser können text-rendering unterschiedlich interpretieren oder ignorieren, und auto aktiviert in manchen Engines bereits die Lesbarkeit für großen Text. Verlassen Sie sich nicht darauf für layout-kritische Ergebnisse.
Leistungskosten bei langem Text. optimizeLegibility auf einem großen Textblock kann das Rendering verlangsamen und beim ersten Zeichnen sogar zu einem sichtbaren Aufflackern führen. Wenden Sie es auf bestimmte Elemente an (Überschriften, kurze Beschriftungen) statt auf body oder *.
Es wird vererbt. Das Setzen auf einem Elternelement gilt für alle Nachfahren — genau deshalb ist ein pauschales body { text-rendering: optimizeLegibility; } auf textlastigen Seiten riskant.
Bevorzugen Sie die Standardeigenschaften, wenn möglich. Für ausschließlich Kerning oder ausschließlich Ligaturen sind font-kerning und font-variant-ligatures besser spezifiziert und vorhersehbarer.

Werte

Wert	Beschreibung
auto	Der Browser entscheidet selbst, wann er beim Zeichnen von Text auf Geschwindigkeit, Lesbarkeit oder geometrische Präzision optimiert. Dieser Wert wird von den Browsern unterschiedlich interpretiert.
optimizeSpeed	Gibt an, dass der Browser beim Zeichnen von Text die Renderinggeschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision bevorzugen soll. Kerning und Ligaturen sind deaktiviert.
optimizeLegibility	Gibt an, dass der Browser Lesbarkeit gegenüber Renderinggeschwindigkeit und geometrischer Präzision bevorzugen soll.
geometricPrecision	Gibt an, dass der Browser Präzision gegenüber Renderinggeschwindigkeit und Lesbarkeit bevorzugen soll.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Der Wert geometricPrecision der text-rendering Eigenschaft gibt an,

dass der Browser Lesbarkeit gegenüber Renderinggeschwindigkeit und geometrischer Präzision bevorzugen soll.dass der Browser beim Zeichnen von Text die Renderinggeschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision bevorzugen soll.dass der Browser Präzision gegenüber Renderinggeschwindigkeit und Lesbarkeit bevorzugen soll.