カラーフォントの色を変更する

フォント自体に色情報を持っているフォントの色を変更する。

<h1>font palette</h1>

/* フォント自体に色情報を持っているものを読み込む */
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

/* カスタムのフォントパレット */
@font-palette-values --base {
  font-family: "Bungee Spice";
  override-colors: 0 red, 0 blue;
}
@font-palette-values --hovered {
  font-family: "Bungee Spice";
  override-colors: 0 green, 0 red;
}

h1 {
  font-family: "Bungee Spice";
  font-palette: --base;
}
h1:hover {
  font-palette: --hovered;
}

font-paletteはnormal/light/darkの値を使えばフォントが持っている既定食を表現できる。

@font-palette-valuesを使うことで開発者がパレットに名前をつけて利用できる。対応しているフォントは少ないけど、画像やSVGではなく文字を文字として扱えるので良さそう

デモ

hover↓

font palette