CSS font-variant-alternates-Eigenschaft

Die Eigenschaft font-variant-alternates übernimmt die Steuerung der Auswahl alternativer Glyphen.

Die Namen der alternativen Glyphenfunktionen (styleset, stylistic, character-variant, ornament, swash, annotation) können in @font-feature-values definiert werden. Die in @font-feature-values angegebenen menschenlesbaren Namen sind im Stylesheet zulässig.

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

Syntax

Syntax der CSS font-variant-alternates-Eigenschaft

css

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

Beispiel für die font-variant-alternates-Eigenschaft:

Beispiel für die CSS font-variant-alternates-Eigenschaft

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Font-variant-alternates property example</h2>
    <p>This paragraph uses the swash alternate.</p>
    <p class="variant">This paragraph uses the swash alternate.</p>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS font-variant-alternates Property

Werte

Wert	Beschreibung
normal	Keine der Funktionen ist aktiviert.
historical-forms	Aktiviert die Anzeige historischer Formen.
stylistic()	Aktiviert die Anzeige stilistischer Alternativen.
styleset()	Aktiviert die Anzeige mit stilistischen Sets.
character-variant()	Aktiviert spezifische stilistische Alternativen für Zeichen.
swash()	Aktiviert Swash-Glyphen.
ornaments()	Aktiviert die Anzeige von Ornamenten.
annotation()	Aktiviert alternative Anmerkungsformen.
initial	Legt den Standardwert der Eigenschaft fest.
inherit	Erbt die Eigenschaft vom Elternelement.

Browser-Kompatibilität

Browser	Unterstützung
Chrome	36+
Edge	79+
Firefox	34+
Safari	10+
Opera	23+

Praxis

Welche Funktion hat die CSS-Eigenschaft 'font-variant-alternates'?

Es hilft bei der Steuerung von Suchmaschinenoptimierungstechniken.Es ermöglicht das Aktivieren von stilistischen Sets und Zeichenvarianten für OpenType-Schriften.Es ändert die Textfarbe innerhalb eines CSS-Dokuments.Es ermöglicht die Auswahl von normalen, Small-Caps- oder Ligatur-Alternativen in einer Schrift.Es wird verwendet, um das Thema einer Webseite festzulegen.

CSS font-variant-alternates-Eigenschaft ​

Syntax ​

Beispiel für die font-variant-alternates-Eigenschaft: ​

Ergebnis ​

Werte ​

Browser-Kompatibilität ​