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
@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
<h2>C'est épicé</h2>
<h2 class="extra-spicy">C'est très épicé !</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
Specification |
---|
CSS Fonts Module Level 4> # font-family-2-desc> |
Compatibilité des navigateurs
Loading…
Voir aussi
font-family
@font-palette-values
- Le descripteur
override-colors
- La propriété
font-palette
CSSFontPaletteValuesRule.fontFamily