Sintassi

Significato dei valori principali:

• font-family: Il nome del font a cui si applica la palette di colori personalizzata.

• base-palette: (opzionale) Seleziona una palette predefinita del font come base da cui partire.

• override-colors: Elenco di colori che sostituiscono quelli della palette del font. Usano l’ordine della palette originale.

Esempio proprietà: @font-palette-values

Codice Esempio: @font-palette-values

CODE: CSS

1.   @font-face {

2.     font-family: "Twemoji Mozilla";

3.     src: url("https://cdn.jsdelivr.net/gh/eosrei/twemoji-color-font/twemoji-color-font.ttf") format("truetype");

4.   }

6.   @font-palette-values --palette-custom {

7.     font-family: "Twemoji Mozilla";

8.     base-palette: 0;

9.     override-colors:

10.       0 red,

11.       1 green,

12.       2 blue;

13.   }

15.   .palette-text {

16.     font-family: "Twemoji Mozilla", sans-serif;

17.     font-palette: --palette-custom;

18.     font-size: 64px;

19.   }

Contenuto Esempio: @font-palette-values

  
<style>
  @font-face {
    font-family: "Twemoji Mozilla";
    src: url("https://cdn.jsdelivr.net/gh/eosrei/twemoji-color-font/twemoji-color-font.ttf") format("truetype");
  }

  @font-palette-values --palette-custom {
    font-family: "Twemoji Mozilla";
    base-palette: 0;
    override-colors:
      0 red,
      1 green,
      2 blue;
  }

  .palette-text {
    font-family: "Twemoji Mozilla", sans-serif;
    font-palette: --palette-custom;
    font-size: 64px;
  }
</style>

<p class="palette-text">
  🎨🔥✨
</p>
  

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

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