font-family

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨novembre 2022⁩.

Le descripteur CSS font-family de la règle @ @font-palette-values est utilisé pour spécifier à quelle famille de police les valeurs de palette doivent s'appliquer. Cette valeur doit correspondre exactement à celle utilisée lors de la définition de la propriété CSS font-family.

Syntaxe

css

@font-palette-values --Dark-mode {
  font-family: "Bungee Spice";
  /* autres paramètres de palette qui suivent */
}

Les autres valeurs de palette qui suivent ne s'appliquent qu'à la famille de police spécifiée. Vous pouvez créer des règle @ @font-palette-values pour d'autres familles de police en utilisant le même <dashed-ident>. Cela signifie que si vous avez plusieurs polices couleur, vous pouvez utiliser le même identifiant pour chacune.

Valeurs

<family-name>: Définit le nom de la famille de police.

Définition formelle

En lien avec les règles @	`@font-palette-values`
Valeur initiale	`n/a (required)`
Valeur calculée	comme spécifié

Syntaxe formelle

font-family = 
  <family-name>#  

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

Exemples

Utiliser des noms de famille identiques

Dans cet exemple, lorsque le descripteur font-family est utilisé dans la règle @font-palette-values, la même valeur est utilisée pour la propriété font-family que lors de sa déclaration.

HTML

html

<h2>C'est épicé</h2>
<h2 class="extra-spicy">C'est très épicé&nbsp;!</h2>

CSS

css

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
@font-palette-values --bungee-extra-spicy {
  font-family: "Bungee Spice";
  override-colors:
    0 darkred,
    1 red;
}

h2 {
  font-family: "Bungee Spice", fantasy;
}

h2.extra-spicy {
  font-palette: --bungee-extra-spicy;
}

Résultat

Utiliser le même identifiant de palette pour plusieurs familles de police

Dans cet exemple, deux règles @font-palette-values sont définies pour deux familles de police, mais les deux utilisent le même identifiant dashed-ident, --Dark Mode. Cela permet d'appliquer la propriété font-palette à plusieurs éléments (h1 et h2 ici) en même temps. C'est utile si vous souhaitez adapter les couleurs des polices à l'identité visuelle de votre site.

css

@font-palette-values --Dark-Mode {
  font-family: "Bungee Spice";
  /* paramètres de palette pour Bungee Spice */
}

@font-palette-values --Dark-Mode {
  font-family: Bixa;
  /* paramètres de palette pour Bixa */
}

h1,
h2 {
  font-palette: --Dark-Mode;
}

h1 {
  font-family: "Bungee Spice", fantasy;
}

h2 {
  font-family: Bixa, fantasy;
}

Specifications

Specification
CSS Fonts Module Level 4 # font-family-2-desc

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

This page was last modified on ⁨29 sept. 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content