Règle CSS @font-feature-values

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

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; }
}

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

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

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 »

Valeurs

Valeur	Description
@swash	Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle swash() de font-variant-alternates.
@annotation	Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle annotation() de font-variant-alternates.
@ornaments	Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle ornaments() de font-variant-alternates.
@stylistic	Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle stylistic() de font-variant-alternates.
@styleset	Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle styleset() de font-variant-alternates.
@character-variant	Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle character-variant() de font-variant-alternates.

Pratique

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

'font-feature-values' applique une fonctionnalité OpenType'font-feature-values' s'applique à toutes les fonctionnalités OpenType disponiblesVous ne pouvez pas utiliser plus d'une famille de polices avec 'font-feature-values''font-feature-values' n'est compatible avec aucune version d'Internet Explorer ou de Safari'font-feature-values' est utilisé pour ajuster le crénage ou le positionnement des lettres individuelles

Règle CSS @font-feature-values ​

Syntaxe ​

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

Valeurs ​

Pratique ​

Règle CSS @font-feature-values

Syntaxe

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

Valeurs

Pratique