@font-palette-values

Syntaxe

@font-palette-values --identifier {
  font-family: Bixa;
}
.my-class {
  font-palette: --identifier;
}

La valeur <dashed-ident> est un identifiant défini par l'utilisateur·rice qui, bien qu'il ressemble à une propriété personnalisée CSS, se comporte différemment et n'est pas utilisé dans une fonction CSS var().

Descripteurs

base-palette

Définit le nom ou l'index de la palette de base, créée par le·la créateur·ice de la police, à utiliser.

font-family

Définit le nom de la famille de police à laquelle cette palette peut être appliquée. Un nom de font-family est requis pour que la règle @font-palette-values soit valide.

override-colors

Définit les couleurs de la palette de base à remplacer.

Syntaxe formelle

@font-palette-values = 
  @font-palette-values <dashed-ident> { <declaration-list> }  

Exemples

Remplacer les couleurs d'une palette existante

Cet exemple montre comment modifier certaines ou toutes les couleurs d'une police couleur.

HTML

<p>couleurs par défaut</p>
<p class="alternate">couleurs alternatives</p>

CSS

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
p {
  font-family: "Bungee Spice", fantasy;
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}
.alternate {
  font-palette: --Alternate;
}

Résultat

Lorsque vous remplacez les couleurs de la palette normale ou de la palette de base à l'index 0, il n'est pas nécessaire de déclarer quelle palette de base utiliser. Cela ne doit être fait que si vous remplacez une autre palette de base. Si vous remplacez toutes les couleurs, il n'est pas non plus nécessaire de spécifier la palette de base à utiliser.

Specifications

Compatibilité des navigateurs

Voir aussi

• La propriété font-palette
• Le descripteur font-family
• Le descripteur base-palette
• Le descripteur override-colors
• CSSFontPaletteValuesRule