text-rendering

auto

Der Browser trifft fundierte Annahmen darüber, wann er beim Zeichnen von Text Geschwindigkeit, Lesbarkeit und geometrische Präzision optimieren soll. Für Unterschiede in der Interpretation dieses Wertes durch den Browser siehe die Kompatibilitätstabelle.

Der auto Wert ist ein guter Standard für die Balance zwischen Qualität und Leistung, besonders für längere Fließtexte.

optimizeSpeed

Der Browser betont die Rendering-Geschwindigkeit mehr als Lesbarkeit und geometrische Präzision beim Zeichnen von Text. Es deaktiviert Kerning und Ligaturen.

Der optimizeSpeed Wert ist vorzuziehen in ressourcenbeschränkten Rendering-Szenarien, wie langsamen Prozessoren oder niedriger Batterieleistung.

optimizeLegibility

Der Browser betont die Lesbarkeit mehr als Rendering-Geschwindigkeit und geometrische Präzision. Dies ermöglicht Kerning und optionale Ligaturen.

Der optimizeLegibility Wert ist vorzuziehen für Texte, die groß in der Größe, aber kurz im Inhalt sind, wie Überschriften oder Banner, um ihre Lesbarkeit zu verbessern. Es könnte auch für hochwertige professionelle Typografie wie veröffentlichte Artikel verwendet werden. Es wird für typische Artikel aufgrund potenzieller Leistungseinbußen nicht empfohlen.

geometricPrecision

Der Browser betont die geometrische Präzision mehr als Rendering-Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriftarten — wie Kerning — skalieren nicht linear. Dieser Wert kann also den Text bei Verwendung dieser Schriftarten gut aussehen lassen.

In SVG, wenn Text vergrößert oder verkleinert wird, berechnen Browser die endgültige Größe des Textes (die durch die angegebene Schriftgröße und den angewandten Maßstab bestimmt wird) und fordern eine Schrift von dieser berechneten Größe vom Schriftsystem der Plattform an. Aber wenn Sie eine Schriftgröße von zum Beispiel 9 mit einem Maßstab von 140% anfordern, existiert die resultierende Schriftgröße von 12.6 nicht explizit im Schriftsystem, sodass der Browser die Schriftgröße stattdessen auf 12 rundet. Dies führt zu einer treppenartigen Skalierung von Text.

Aber die geometricPrecision Eigenschaft — wenn sie vollständig von der Rendering-Engine unterstützt wird — ermöglicht Ihnen, Ihren Text flüssig zu skalieren. Bei großen Skalierungsfaktoren könnten Sie weniger als schöne Textdarstellungen sehen, aber die Größe ist wie erwartet — weder auf- noch abgerundet auf die nächste von Windows oder Linux unterstützte Schriftgröße.

Der geometricPrecision Wert optimiert weder die Lesbarkeit noch die Leistung. Er macht normalerweise in SVG Sinn, wo Sie möchten, dass Ihre Grafik sich originalgetreu ohne Verzerrung der Textdimensionen skaliert.

Hinweis: WebKit wendet den angegebenen Wert präzise an, aber Gecko behandelt den Wert wie optimizeLegibility.

text-rendering = 
  auto                |
  optimizeSpeed       |
  optimizeLegibility  |
  geometricPrecision  

Dies zeigt, wie optimizeLegibility von Browsern automatisch angewendet 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

Dieses Beispiel zeigt den Unterschied zwischen dem Erscheinungsbild von optimizeSpeed und optimizeLegibility (in Ihrem Browser; andere Browser können abweichen).

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

• Zeichnen von Text in einem <canvas>

• CSS Textdekoration CSS-Modul

• Verwandte CSS-Eigenschaften

  • text-decoration (und seine Langhandschreibweisen, wie text-decoration-line, text-decoration-style, und text-decoration-thickness)
  • text-emphasis (und seine Langhandschreibweisen, einschließlich text-emphasis-color, text-emphasis-position, und text-emphasis-style)
  • text-shadow
  • text-transform

• Das SVG text-rendering Attribut

• SVG und CSS