Sintassi

Significato dei valori principali:

• normal: Utilizza la palette predefinita del font.

• light: Se disponibile, utilizza una palette chiara (chiari su sfondo scuro).

• dark: Se disponibile, utilizza una palette scura (scuri su sfondo chiaro).

• <custom-palette>: Nome di una palette definita con la regola @font-palette-values.

Esempio proprietà: font-palette

Codice Esempio: font-palette

CODE: CSS

1.   @font-face {

2.     font-family: "NotoColorEmoji";

3.     src: url("https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji/fonts/NotoColorEmoji.ttf") format("truetype");

4.   }

6.   @font-palette-values customPalette {

7.     font-family: "NotoColorEmoji";

8.     base-palette: 0;

9.     override-colors:

10.       0 #ff6347,

11.       1 #50a14f;

12.   }

14.   .font-palette-example {

15.     font-family: "NotoColorEmoji", sans-serif;

16.     font-palette: customPalette;

17.     font-size: 60px;

18.   }

Contenuto Esempio: font-palette

  
<style>
  @font-face {
    font-family: "NotoColorEmoji";
    src: url("https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji/fonts/NotoColorEmoji.ttf") format("truetype");
  }

  @font-palette-values customPalette {
    font-family: "NotoColorEmoji";
    base-palette: 0;
    override-colors:
      0 #ff6347,
      1 #50a14f;
  }

  .font-palette-example {
    font-family: "NotoColorEmoji", sans-serif;
    font-palette: customPalette;
    font-size: 60px;
  }
</style>

<div class="font-palette-example">
  🌈🧠🦄
</div>
  

⚠️ Note compatibilità:
Per vedere l’effetto reale, il browser deve supportare i font COLRv1 e la proprietà font-palette.

Richiede font COLRv1 (Color Font Format livello 1), come Noto Color Emoji o Twemoji Mozilla.

Supporto parziale su editor visuali (alcuni IDE e visualizzatori PDF potrebbero ignorarla).

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser