CSS text-rendering-Eigenschaft

Die text-rendering-Eigenschaft gibt dem Rendering-Engine Informationen darüber, worauf bei der Darstellung von Text optimiert werden soll.

Die text-rendering-Eigenschaft hat vier Werte:

auto
optimizeSpeed
optimizeLegibility
geometricPrecision

Wenn die text-rendering-Eigenschaft auf optimizeLegibility gesetzt ist, priorisiert der Browser die Lesbarkeit, indem er Kerning und Ligaturen aktiviert.

Die text-rendering-Eigenschaft stammt ursprünglich aus SVG, ist jedoch jetzt in den Spezifikationen CSS Text Module Level 3 und Level 4 enthalten. Gecko- und WebKit-basierte Browser ermöglichen die Anwendung auf HTML-Inhalte über CSS.

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

Syntax

CSS text-rendering-Werte

css

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

Beispiel für die text-rendering-Eigenschaft:

CSS text-rendering-Codebeispiel

html

<!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>

Try it Yourself »

Der Unterschied zwischen "optimizeSpeed" und "optimizeLegibility"

Das folgende Beispiel zeigt den Unterschied zwischen den Werten "optimizeSpeed" und "optimizeLegibility". Beachten Sie, dass das Ergebnis je nach verwendetem Browser unterschiedlich sein kann:

Beispiel für die text-rendering-Eigenschaft mit den Werten "optimizeSpeed" und "optimizeLegibility":

Beispiel für die text-rendering-Eigenschaft mit den Werten "optimizeSpeed" und "optimizeLegibility":

html

<!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">optimizeSpeed vs optimizeLegibility</p>
    <p class="optimize-legibility">optimizeSpeed vs optimizeLegibility</p>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
auto	Der Browser trifft Annahmen darüber, wann bei der Textdarstellung auf Geschwindigkeit, Lesbarkeit und geometrische Präzision optimiert werden soll. Dieser Wert wird von den Browsern unterschiedlich interpretiert.
optimizeSpeed	Gibt an, dass der Browser bei der Textdarstellung die Rendering-Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzienz priorisieren soll. Kerning und Ligaturen sind deaktiviert.
optimizeLegibility	Gibt an, dass der Browser die Lesbarkeit gegenüber Rendering-Geschwindigkeit und geometrischer Präzienz priorisieren soll.
geometricPrecision	Gibt an, dass der Browser die Präzienz gegenüber Rendering-Geschwindigkeit und Lesbarkeit priorisieren soll.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Der Wert geometricPrecision der text-rendering-Eigenschaft gibt an

dass der Browser die Lesbarkeit gegenüber Rendering-Geschwindigkeit und geometrischer Präzienz priorisieren soll.dass der Browser bei der Textdarstellung die Rendering-Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzienz priorisieren soll.dass der Browser die Präzienz gegenüber Rendering-Geschwindigkeit und Lesbarkeit priorisieren soll.

CSS text-rendering-Eigenschaft ​

Syntax ​

Beispiel für die text-rendering-Eigenschaft: ​

Der Unterschied zwischen "optimizeSpeed" und "optimizeLegibility" ​

Beispiel für die text-rendering-Eigenschaft mit den Werten "optimizeSpeed" und "optimizeLegibility": ​

Werte ​