CSS-Regel font-feature-values

Die Eigenschaft @font-feature-values at-rule stellen einen benannten Wert für ein bestimmtes Schriftmerkmal einer Schriftfamilie ein.

Die Eigenschaft @font-feature-values at-rule können einen der folgenden Merkmalswerte enthalten:

  • @annotation
  • @ornaments
  • @stylistic
  • @styleset
  • @character-variant
Anfangswert swash
Gilt für Alle Elemente
Geerbt Ja
Animierbar Nein
Version CSS3
DOM Syntax object.style.fontFeatureValues = "swash";

Syntax

@font-feature-values: @swash | @annotation | @ornaments | @stylistic | @styleset | @character-variant;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      @font-feature-values "Leitura Display Swashes" {
      @swash { fancy: 1; }
      }
      p {
      font-size: 1.5rem;
      }
      .variant {
      font-family: Leitura Display Swashes;
      font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft @Font-feature-values property example</h2>
    <p>
      Die CSS-Eigenschaft font-variant-alternates steuert die Verwendung alternativer Glyphen. Diese alternativen Glyphen können durch alternative Namen, die in @font-feature-values definiert sind, referenziert werden.
    </p>
    <p>Diese Eigenschaft wird von Firefox und Safari unterstützt.</p>
    <p class="variant">Diese Eigenschaft wird von Firefox und Safari unterstützt.</p>
  </body>
</html>

Werte

Wert Beschreibung
@swash Gibt einen Feature-Namen an, der mit der funktionalen Notation swash() von font-variant-alternates funktioniert. Es ist nur ein Wert erlaubt.
@annotation Gibt einen Feature-Namen an, der mit der funktionalen Notation annotation() von font-variant-alternates funktioniert. Es ist nur ein Wert erlaubt.
@ornaments Gibt einen Feature-Namen an, der mit der funktionalen Notation ornaments() von font-variant-alternates funktioniert. Ein Wert ist erlaubt.
@stylistic Gibt einen Feature-Namen an, der mit der stylistic() funktionalen Notation von von font-variant-alternates funktioniert. Es ist nur ein Wert erlaubt.
@styleset Gibt einen Feature-Namen an, der mit der funktionalen Notation styleset() von font-variant-alternates funktioniert. Die Anzahl der Werte ist unbegrenzt.
@character-variant Gibt einen Funktionsnamen an, der mit der funktionalen Notation character-variant() von font-variant-alternates funktioniert. Es sind ein oder zwei Werte erlaubt.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
34.0+ 9.1+

Übe dein Wissen

Was ermöglicht die CSS-Regel 'font-feature-values' in Webdesign?
Finden Sie das nützlich?