Day 76: overwriting colors in font palettes
source link: https://www.matuzo.at/blog/2023/100daysof-day76/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Day 76: overwriting colors in font palettes
posted on January 9., 2023
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
You can use the override-colors
property to override colors in a font palette.
Color fonts come with one or more predefined color palettes. You can select them by using the font-palette
property. You can also define your own color palettes or change specific colors in a palette using the override-colors
property.
@font-face {
font-family: 'Rocher';
src: url('/fonts/RocherColorGX.woff2');
}
h1 {
font-family: "Rocher";
}
That's the default font palette of the “Rocher” font.
Jurassic 5
Using the @font-palette-value
rule you can create a new font palette. You reference the typeface you want to create the palette for using the font-family
property. Color palettes of the “Rocher” font consist of 4 colors. We can override colors by defining the index (starting with 0) of the color and a valid color value.
@font-palette-values --custom {
font-family: 'Rocher';
override-colors: 0 #a13908;
}
h1 {
font-palette: --custom;
}
The Pharcyde
You don't have to start at 0, you can override any color.
@font-palette-values --custom {
font-family: 'Rocher';
override-colors: 2 #a13908;
}
Del the Funky Homosapien
Here's a custom palette based on the colors of my code syntax highlighter.
@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);
}
A Tribe Called Quest
You can also use another base palette and override colors.
@font-palette-values --custom {
font-family: 'Rocher';
base-palette: 1;
override-colors: 0 #9e4356;
}
MF DOOM
Further reading
Want more?
Overview: 100 Days Of More Or Less Modern CSS
My blog doesn't support comments yet, but you can reply via e-mail.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK