font-family

Syntaxe

@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

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

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

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.

@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

Compatibilité des navigateurs

Voir aussi

• font-family
• @font-palette-values
• Le descripteur override-colors
• La propriété font-palette
• CSSFontPaletteValuesRule.fontFamily