CSS-Eigenschaft font-variant-alternates

Die Eigenschaft font-variant-alternates steuert die Auswahl der alternativen Glyphen.

Diese alternativen Glyphen können durch die mit @font-feature-values definierten alternativen Namen referenziert werden.

Anfangswert normal
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Ja
Animierbar Nein
Version CSS3
DOM Syntax object.style.fontVariantAlternates = "normal";

Syntax

font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      @font-feature-values "Leitura Display Swashes" {
      @swash { fancy: 1 }
      }
      p {
      font-size: 2rem;
      }
      .variant {
      font-family: Leitura Display Swashes;
      font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft Font-variant-alternates</h2>
    <p>Nur Firefox unterstützt diese Eigenschaft.</p>
    <p class="variant">Nur Firefox unterstützt diese Eigenschaft.</p>
  </body>
</html>

Werte

Wert Beschreibung
normal Keine der Funktionen ist aktiviert.
historical forms Ermöglicht die Anzeige historischer Formen.
stylistic() Ermöglicht die Anzeige von stilistischen Alternativen.
styleset() Ermöglicht die Darstellung mit stilistischen Sets.
character-variant() Ermöglicht spezifische stilistische Alternativen für Zeichen.
swash() Aktiviert Taumelsymbole
ornaments() Ermöglicht die Darstellung von Ornamenten.
annotation() Ermöglicht alternative Annotationsformen.
initial Es stellt die Eigenschaft auf seinen Standardwert ein.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
34.0+ 9.1+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'font-variant-alternates'?
Finden Sie das nützlich?