CSS Reference

@font-palette-values

カラーフォントのカスタムカラーパレットを定義する

@font-palette-values 規則は、カラーフォント向けにカスタムカラーパレットを定義し、そのカラーパレットを特定のカラーフォントに関連付けます。フォントに元々組み込まれているカラーパレットに依存せず、制作者が任意のカラーを使ってフォントをカスタマイズすることが可能です。

カラーフォントとは、複数の色を使用して字形（グリフ）を表現できるフォントの総称です。従来のフォントが単色で字形を描写するのに対し、カラーフォントは、OpenType CPALテーブル（色のパレット管理）、SVGなどのベクターデータやビットマップデータを組み合わせることで、字形内に複数の色を使ったり、グラデーションやパターンを適用したりできます。これにより、リッチで装飾的な文字表現が可能になります。

@font-palette-values 規則では、下記のことが可能です。

  • カラーフォント内にある既存のカラーパレットを参照する
  • 制作者が定義した色で、拡張されたカスタムカラーパレットを作成する
  • 制作者が定義した色でカラーフォント内のあるカラーパレットの色を上書きする

なお、OpenType CPALテーブルはsRGB色空間に制約されますが、@font-palette-values 内の <color> は任意のCSSカラーを指定することができます。CSSカラーは、より広範な色空間をサポートしており、例えばRGBA、HSL、HEXコードなど、さまざまな形式で色を指定できます。

ただし、現時点における一部の実装では、内部的に使用されるAPIがsRGBに制限されていることなどが原因で、@font-palette-values で指定したCSSカラーが自動的にsRGBにマッピングされる場合があります。これは、CSSで指定した色がsRGB色空間に変換されてしまう可能性があることを意味します。

@font-palette-values 規則の基本的な構文は下記のようになります。

@font-palette-values <dashed-ident> {
  <declaration-list>
}

<dashed-ident> には、カスタムプロパティ同様、-- で始まる値、例えば --Foo などを指定します。この値は定義したカラーパレットの名前となり、font-palette プロパティで指定することでカラーパレットをフォントを関連付けることができます。

<declaration-list> として記述可能な記述子は下記になります。

font-family 記述子

定義したカラーパレットを適用するフォントファミリーの名前を指定します。

base-palette 記述子

カラーフォントで定義されている、ベースパレットの名前、あるいはパレットを参照するインデックスを指定します。

指定できるのは、light または、dark キーワード、あるは 0 以上の整数です。

light キーワードは、「背景が明るい（白に近い）」場合に使用されるカラーパレットがカラーフォント内で定義されている場合はそれに合致します。そのような定義がない場合は 0 と同様です。

dark キーワードは、「背景が暗い（黒に近い）」場合に使用されるカラーパレットがカラーフォント内で定義されている場合はそれに合致します。そのような定義がない場合は 0 と同様です。

override-colors 記述子

base-palette 記述子で指定した、カラーフォント内のカラーパレットの色を上書きします。

下記の例の様に、key <color> という組み合わせを、カンマ（,）で区切って指定します。key は、パレット内のエントリーで、0 からスタートします。

@font-palette-values --Festival {
  font-family: Banner Flag;
  base-palette: 1;
  override-colors:
    0 #00ffbb,
    1 #007744;
    2 rgb(123, 64, 27);
}

@font-palette-valuesのサンプルソース

@font-palette-values --Cooler {
  font-family: Bixa;
  base-palette: 1;
  override-colors:
    1 #7EB7E4;
}
/*
2つのカラーフォント、Bixxxa と Bungeehee があり、これらの緑系パレットを利用したい。
Bixxxa フォントにはすでに利用できるパレットがある。
Bungeehee フォントに関しては、緑系パレットを利用するため既存のパレットの中から1色だけ上書きしてそれを得る必要がある。
*/

@font-face {
  font-family: Bixxxa;
  src: url('./bixxxa.woff') format('woff');
}

@font-face {
  font-family: Bungeehee;
  src: url('./bungeehee.woff') format('woff');
}

@font-palette-values --ToxicGreen {
  font-family: Bixxxa;
  base-palette: 3; /* Bixxxa’s フォントの緑系パレットを指定 */
}

@font-palette-values --ToxicGreen {
  font-family: Bungeehee;
  base-palette: 7; /* Bungeehee フォントの緑系パレットを指定 */
  override-colors: 2 lime; /* 元の pink を lime で上書き */
}

h1 {
  font-family: Bixxxa;
  font-palette: --ToxicGreen;
}

h2 {
  font-family: Bungeehee;
  font-palette: --ToxicGreen;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome