Dernière mise à jour : juin 2022
Votre navigateur ne supporte pas cette démonstration. Chromium / Safari uniquement.
Passez votre souris sur le texte :
Hello world
Le code :
<div class=violet>Hello world</div>
@supports (font-palette:--violet){
@font-face {font-family: 'Rocher';src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);}
.violet{
font-family: 'Rocher';
font-weight: normal;
font-size: 6vmax;
font-variation-settings: "BVEL" 0, "SHDW" 100;
transition: .4s;
font-palette: --violet;
}
@font-palette-values --violet {
font-family: Rocher;
base-palette: 6
}
.violet:hover {
font-variation-settings: "BVEL" 100,"SHDW" 0;
transition: font-variation-settings .4s ease-out
}
}
Hello word
Le code :
<div class=degrade>Hello world</div>
@supports (font-palette:--degrade){
/* vietnamese */
@font-face {
font-family: 'Bungee Spice';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/bungeespice/v1/nwpTtK2nIhxE0q-IwgSpZBqyxyg_WMM.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Bungee Spice';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/bungeespice/v1/nwpTtK2nIhxE0q-IwgSpZBqyxig_WMM.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bungee Spice';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/bungeespice/v1/nwpTtK2nIhxE0q-IwgSpZBqyyCg_.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.degrade {
font-family: "Bungee Spice";
font-size: 6vmax;
font-palette: --degrade;
color: #6753ea;
}
@font-palette-values --degrade {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 #d357d3, 1 gold;
}
}