Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

@font-feature-values CSS at-rule

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.

Die @font-feature-values CSS At-Regel ermöglicht es Ihnen, einen gemeinsamen Namen in der font-variant-alternates-Eigenschaft für Funktionen zu verwenden, die in OpenType unterschiedlich aktiviert werden. Dies kann Ihre CSS vereinfachen, wenn Sie mehrere Schriftarten verwenden.

Die @font-feature-values At-Regel kann entweder auf oberster Ebene Ihres CSS oder innerhalb einer beliebigen CSS-Bedingungsgruppenregel verwendet werden.

Syntax

css
@font-feature-values Font Name {
  font-display: swap;
  @styleset {
    nice-style: 12;
  }
  @swash {
    fancy: 2;
  }
}

Jeder @font-feature-values Block kann eine Liste von Funktionswertblöcken (unten aufgelistet) sowie den font-display-Deskriptor enthalten.

Funktionswertblöcke

@swash

Gibt einen Funktionsnamen an, der mit der funktionalen Notation swash() von font-variant-alternates funktioniert. Eine Definition eines Swash-Funktionswerts erlaubt nur einen Wert: ident1: 2 ist gültig, aber ident2: 2 4 ist es nicht.

@annotation

Gibt einen Funktionsnamen an, der mit der funktionalen Notation annotation() von font-variant-alternates funktioniert. Eine Definition eines Annotation-Funktionswerts erlaubt nur einen Wert: ident1: 2 ist gültig, aber ident2: 2 4 ist es nicht.

@ornaments

Gibt einen Funktionsnamen an, der mit der funktionalen Notation ornaments() von font-variant-alternates funktioniert. Eine Definition eines Ornaments-Funktionswerts erlaubt nur einen Wert: ident1: 2 ist gültig, aber ident2: 2 4 ist es nicht.

@stylistic

Gibt einen Funktionsnamen an, der mit der funktionalen Notation stylistic() von font-variant-alternates funktioniert. Eine Definition eines stilistischen Funktionswerts erlaubt nur einen Wert: ident1: 2 ist gültig, aber ident2: 2 4 ist es nicht.

@styleset

Gibt einen Funktionsnamen an, der mit der funktionalen Notation styleset() von font-variant-alternates funktioniert. Eine Styleset-Funktionswertdefinition erlaubt eine unbegrenzte Anzahl von Werten: ident1: 2 4 12 1 wird den OpenType-Werten ss02, ss04, ss12 und ss01 zugeordnet. Beachten Sie, dass Werte größer als 99 gültig sind, aber keinen OpenType-Werten zugeordnet werden und ignoriert werden.

@character-variant

Gibt einen Funktionsnamen an, der mit der funktionalen Notation character-variant() von font-variant-alternates funktioniert. Eine Definition eines Zeichenvarianten-Funktionswerts erlaubt entweder einen oder zwei Werte: ident1: 3 wird zu cv03=1 zugeordnet, und ident2: 2 4 wird zu cv02=4 zugeordnet, aber ident2: 2 4 5 ist ungültig.

Formale Syntax

@font-feature-values = 
@font-feature-values <font-family-name># { <declaration-rule-list> }

<font-family-name> =
<string> |
<custom-ident>+

Beispiele

Verwendung von @styleset in einer @font-feature-values-Regel

css
/* At-rule for "nice-style" in Font One */
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/* At-rule for "nice-style" in Font Two */
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

/* Apply the at-rules with a single declaration */
.nice-look {
  font-variant-alternates: styleset(nice-style);
}

Spezifikationen

Spezifikation
CSS Fonts Module Level 4
# font-feature-values

Browser-Kompatibilität

Siehe auch