Posté sur
Il est temps de me familiariser avec le CSS moderne. Il y a tellement de nouveautés en CSS que je connais trop peu. Pour changer cela, j’ai lancé #100DaysOfMoreOrLessModernCSS. Pourquoi un CSS plus ou moins moderne ? Parce que certains sujets porteront sur des fonctionnalités de pointe, tandis que d’autres existent depuis un certain temps déjà, mais j’ai juste peu ou pas d’expérience avec cela.
Vous pouvez utiliser le override-colors propriété pour remplacer les couleurs dans une palette de polices.
Les polices de couleur sont fournies avec une ou plusieurs palettes de couleurs prédéfinies. Vous pouvez les sélectionner à l’aide de la font-palette propriété. Vous pouvez également définir vos propres palettes de couleurs ou modifier des couleurs spécifiques dans une palette à l’aide de la override-colors propriété.
@font-face {
font-family: 'Rocher';
src: url('/fonts/RocherColorGX.woff2');
}h1 {
font-family: "Rocher";
}
C’est la palette de polices par défaut de la police “Rocher”.
En utilisant le @font-palette-value règle, vous pouvez créer une nouvelle palette de polices. Vous référencez la police de caractères que vous souhaitez créer la palette pour l’utilisation de la font-family propriété. Les palettes de couleurs de la police “Rocher” se composent de 4 couleurs. Nous pouvons remplacer les couleurs en définissant l’index (commençant par 0) de la couleur et une valeur de couleur valide.
@font-palette-values --custom {
font-family: 'Rocher';
override-colors: 0 #a13908;
}h1 {
font-palette: --custom;
}
Vous n’êtes pas obligé de commencer à 0, vous pouvez remplacer n’importe quelle couleur.
@font-palette-values --custom {
font-family: 'Rocher';
override-colors: 2 #a13908;
}Voici une palette personnalisée basée sur les couleurs de mon surligneur de syntaxe de code.
@font-palette-values --custom {
font-family: 'Rocher';
override-colors:
0 rgb(21, 58, 81),
1 rgb(255 215 0),
2 rgb(84 159 167),
3 rgb(128, 210, 219);
}Vous pouvez également utiliser une autre palette de base et remplacer les couleurs.
@font-palette-values --custom {
font-family: 'Rocher';
base-palette: 1;
override-colors: 0 #9e4356;
}Voir sur CodePen.