W3docs
fr
Se connecter

Règle CSS @font-feature-values

The @font-feature-values at-rule uses a name for features in the font-variant-alternates property. Read about the property values and see examples.

La règle @font-feature-values définit une valeur nommée pour certaines fonctionnalités de police d'une famille de polices.

Elle peut être utilisée au niveau supérieur du CSS ou dans une règle @-conditionnelle de groupe CSS.

La règle @font-feature-values peut contenir l'une des valeurs de fonctionnalités suivantes :

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

Outre le glyphe par défaut d'un caractère, une police peut également comporter d'autres glyphes alternatifs (par exemple, des glyphes swash, des alternances stylistiques). Une police peut posséder plusieurs glyphes dans ces alternances, chacun étant indexé. Vous pouvez créer un nom pour cet index à l'aide de la règle @font-feature-values, ce qui permet de l'utiliser avec font-variant-alternates. Notez que cette règle @-conditionnelle nécessite qu'une police correspondante soit chargée et fonctionne exclusivement avec la propriété font-variant-alternates.

Syntaxe

Syntaxe de la règle @-conditionnelle CSS @font-feature-values

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

Exemple de la règle @-conditionnelle @font-feature-values :

Exemple de la règle @-conditionnelle CSS @font-feature-values

<!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>
Essayez vous-même »

Valeurs

ValeurDescription
@swashSpécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle swash() de font-variant-alternates.
@annotationSpécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle annotation() de font-variant-alternates.
@ornamentsSpécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle ornaments() de font-variant-alternates.
@stylisticSpécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle stylistic() de font-variant-alternates.
@stylesetSpécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle styleset() de font-variant-alternates.
@character-variantSpécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle character-variant() de font-variant-alternates.

Pratique

Pratique

Parmi les affirmations suivantes, lesquelles sont vraies concernant la propriété CSS 'font-feature-values' ?