Twitter
Partagez cette démonstration : Twitter

CSS font-palette : la typographie en couleurs

Dernière mise à jour : juin 2022

Votre navigateur ne supporte pas cette démonstration. Chromium / Safari uniquement.

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;        
      
	  }
	

}



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.

haut page