CSS @font-feature-values-Regel

Die @font-feature-values-At-Regel weist einem bestimmten Schriftfeature einer Schriftfamilie einen benannten Wert zu.

Sie kann auf der obersten CSS-Ebene oder innerhalb einer CSS-Conditional-Group-At-Regel verwendet werden.

Die @font-feature-values-At-Regel kann eines der folgenden Feature-Werte enthalten:

@annotation
@ornaments
@stylistic
@styleset
@character-variant

Neben dem Standard-Glyph eines Zeichens kann eine Schriftart auch alternative Glyphen enthalten (z. B. Swash-Glyphen, stilistische Alternativen). Eine Schriftart kann mehrere Glyphen in diesen Alternativen haben, von denen jedes einen Index besitzt. Mit der @font-feature-values-At-Regel kann für diesen Index ein Name erstellt werden, sodass er mit font-variant-alternates verwendet werden kann. Beachten Sie, dass diese At-Regel das Laden einer passenden Schriftart voraussetzt und ausschließlich mit der Eigenschaft font-variant-alternates funktioniert.

Syntax

Syntax der CSS @font-feature-values-At-Regel

css

@font-feature-values <family-name> {
  @swash { name: index; }
  @annotation { name: index; }
  @ornaments { name: index; }
  @stylistic { name: index; }
  @styleset { name: index; }
  @character-variant { name: index; }
}

Beispiel für die @font-feature-values-At-Regel:

Beispiel für die CSS @font-feature-values-At-Regel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>@Font-feature-values at-rule example</h2>
    <p>
      The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
    </p>
    <p>This property is supported by Firefox and Safari.</p>
    <p class="variant">This property is supported by Firefox and Safari.</p>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
@swash	Gibt einen Feature-Namen an, der mit der swash()-Funktionsnotation von font-variant-alternates funktioniert.
@annotation	Gibt einen Feature-Namen an, der mit der annotation()-Funktionsnotation von font-variant-alternates funktioniert.
@ornaments	Gibt einen Feature-Namen an, der mit der ornaments()-Funktionsnotation von font-variant-alternates funktioniert.
@stylistic	Gibt einen Feature-Namen an, der mit der stylistic()-Funktionsnotation von font-variant-alternates funktioniert.
@styleset	Gibt einen Feature-Namen an, der mit der styleset()-Funktionsnotation von font-variant-alternates funktioniert.
@character-variant	Gibt einen Feature-Namen an, der mit der character-variant()-Funktionsnotation von font-variant-alternates funktioniert.

Praxis

Welche der folgenden Aussagen sind gemäß der CSS-Eigenschaft 'font-feature-values' wahr?

'font-feature-values' wendet ein OpenType-Feature an'font-feature-values' wird auf alle verfügbaren OpenType-Features angewendetSie können nicht mehr als eine Schriftfamilie mit 'font-feature-values' verwenden'font-feature-values' ist mit keiner Version von Internet Explorer oder Safari kompatibel'font-feature-values' wird zum Feinjustieren des Kerning oder der Positionierung einzelner Buchstaben verwendet

CSS @font-feature-values-Regel ​

Syntax ​

Beispiel für die @font-feature-values-At-Regel: ​

Werte ​

Praxis ​

CSS @font-feature-values-Regel

Syntax

Beispiel für die @font-feature-values-At-Regel:

Werte

Praxis