font-palette

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis novembre 2022.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS font-palette permet de définir l'une des nombreuses palettes contenues dans une police de couleur ^(angl.) qu'un agent utilisateur peut utiliser pour la police. Les utilisateur·ice·s peuvent aussi modifier les valeurs d'une palette ou créer une nouvelle palette en utilisant la règle @font-palette-values.

Note : Une palette font-palette est prioritaire lors de la coloration d'une police. La propriété color ne remplacera pas une palette de police, même si elle est définie avec !important.

Syntaxe

css

/* Utilisation d'une palette définie par la police */
font-palette: normal;

/* Utilisation d'une palette définie par l'utilisateur */
font-palette: --one;

/* Création d'une nouvelle palette en mélangeant deux autres */
font-palette: palette-mix(in lch, --blue, --yellow);

Valeurs

normal: Définit la palette de couleurs par défaut ou la coloration par défaut des glyphes (définie par le·la créateur·ice de la police) à utiliser pour la police. Avec ce réglage, la palette à l'index 0 de la police est utilisée.
light: Définit la première palette de la police qui correspond à « clair » à utiliser pour la police. Certaines polices contiennent des métadonnées qui identifient une palette comme adaptée à un fond clair (proche du blanc). Si la police ne possède pas ces métadonnées, la valeur light agit comme normal.
dark: Définit la première palette de la police qui correspond à « sombre » à utiliser pour la police. Certaines polices contiennent des métadonnées qui identifient une palette comme adaptée à un fond sombre (proche du noir). Si la police ne possède pas ces métadonnées, la valeur agit comme normal.
<palette-identifier>: Permet de définir vos propres valeurs pour la palette de police en utilisant la règle @font-palette-values. Cette valeur est définie au format <dashed-ident>.
palette-mix() Expérimental: Crée une nouvelle valeur font-palette en mélangeant deux valeurs font-palette selon des pourcentages définis et des méthodes d'interpolation de couleurs.

Définition formelle

Valeur initiale	`normal`
Applicabilité	all elements and text. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	by computed value

Syntaxe formelle

font-palette = 
  normal                |
  light                 |
  dark                  |
  <palette-identifier>  |
  <palette-mix()>       

<palette-identifier> = 
  <dashed-ident>  

<palette-mix()> = 
  palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

Exemples

Définir une palette sombre

Cet exemple permet d'utiliser la première palette marquée comme sombre (fonctionne mieux sur un fond proche du noir) par le·la créateur·ice de la police.

css

@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}

Animer entre deux palettes

Cet exemple montre comment animer les changements de valeur font-palette pour créer une animation fluide de la police.

HTML

Le HTML contient un seul paragraphe de texte à animer :

html

<p>animation<br />color-palette</p>

CSS

Dans le CSS, on importe une police de couleur ^(angl.) appelée Nabla ^(angl.) depuis Google Fonts ^(angl.), et on définit deux valeurs personnalisées font-palette avec la règle @font-palette-values. On crée ensuite @keyframes pour animer entre ces deux palettes et appliquer cette animation au paragraphe.

css

@import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";

@font-palette-values --blue-nabla {
  font-family: "Nabla";
  base-palette: 2; /* c'est la palette bleue de Nabla */
}

@font-palette-values --grey-nabla {
  font-family: "Nabla";
  base-palette: 3; /* c'est la palette grise de Nabla */
}

@keyframes animate-palette {
  from {
    font-palette: --grey-nabla;
  }

  to {
    font-palette: --blue-nabla;
  }
}

p {
  font-family: "Nabla", fantasy;
  font-size: 5rem;
  margin: 0;
  text-align: center;
  animation: animate-palette 4s infinite alternate linear;
}

Résultat

Le résultat ressemble à ceci :

Note : Les navigateurs qui implémentent encore l'animation font-palette discrète basculeront entre les deux palettes au lieu d'animer en douceur.

Spécifications

Specification
CSS Fonts Module Level 4 # font-palette-prop

Compatibilité des navigateurs

Voir aussi

La fonction palette-mix()
La règle @font-palette-values
Le descripteur base-palette
Le descripteur font-family
Le descripteur override-colors

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 6 févr. 2026 par les contributeurs du MDN.

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