文字の色は color で指定できますが単色しか指定できません。最近では複数の色を組み合わせた カラーフォント も増えてきました。カラーフォントの規格 COLRv0 はほとんどのブラウザがサポート済です。圧縮率の改善やグラデーションをサポートした COLRv1 も IE と Safari を除き、Chrome, Edge, Firefox などでサポート済です。

• COLRv0, COLRv1 サポート状況

カラーフォントはいくつかのカラーパレットを持っています。@font-palette-values でカラーパレットを選択したりカスタマイズすることができます。

まずは、@font-face を用いてカラーフォントに対応したWebフォントを表示します。カラーフォントは Google Fonts で 「Show only color fonts」のチェックをつけるといくつか見つかります。今回は Nabla を使用します。

@font-face {
  font-family: Nabla;
  src: url(../../free/fonts/Nabla-Regular.ttf);
}
.nabla {
  font-family: Nabla;
  font-size: 20pt;
  height: 25pt;
  line-height: 25pt;
}

<div class="nabla">Hello world!!</div>

Nabla は 1～7 の7個の定義済パレットを持っています。@font-palette-values の base-palette および font-palette でパレットを選択することができます。ユーザ定義のカラーパレット名は二つのダッシュ(--)で始まる名前をつけます。

@font-palette-values --Nabla-1 { font-family: Nabla; base-palette: 1; }
@font-palette-values --Nabla-2 { font-family: Nabla; base-palette: 2; }
@font-palette-values --Nabla-3 { font-family: Nabla; base-palette: 3; }
@font-palette-values --Nabla-4 { font-family: Nabla; base-palette: 4; }
@font-palette-values --Nabla-5 { font-family: Nabla; base-palette: 5; }
@font-palette-values --Nabla-6 { font-family: Nabla; base-palette: 6; }
@font-palette-values --Nabla-7 { font-family: Nabla; base-palette: 7; }
.fp-1 { font-palette: --Nabla-1; }
.fp-2 { font-palette: --Nabla-2; }
.fp-3 { font-palette: --Nabla-3; }
.fp-4 { font-palette: --Nabla-4; }
.fp-5 { font-palette: --Nabla-5; }
.fp-6 { font-palette: --Nabla-6; }
.fp-7 { font-palette: --Nabla-7; }

<div class="nabla fp-1">Hello world!!</div>
<div class="nabla fp-2">Hello world!!</div>
<div class="nabla fp-3">Hello world!!</div>
<div class="nabla fp-4">Hello world!!</div>
<div class="nabla fp-5">Hello world!!</div>
<div class="nabla fp-6">Hello world!!</div>
<div class="nabla fp-7">Hello world!!</div>

Nabla では 0～9 の10個の色を使用しています。override-colors でこの色をカスタマイズすることができます。下記の例では4番目のパレットをベースとして、その中の 3番目の色を #008 に、6番目の色を #00f にカスタマイズしています。

@font-palette-values --Nabla-4ex {
  font-family: Nabla;
  base-palette: 4;
  override-colors: 3 #008, 6 #00f;
}
.fp-4ex {
  font-palette: --Nabla-4ex;
}

<div class="nabla fp-4">Hello world!!</div>
<div class="nabla fp-4ex">Hello world!!</div>

• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values
• https://w3c.github.io/csswg-drafts/css-fonts/#at-ruledef-font-palette-values
• https://booth.pm/ja/items/3866396