CSS Reference

font-palette

カラーフォントに使用するカラーパレットを指定する

font-palette プロパティは、カラーフォントに含まれるパレットの中からユーザーエージェントがフォントに使用するパレットを指定します。

@font-palette-values 規則により、カラーパレットの値を上書きしたり、新しいカラーパレットを定義したりすることも可能です。詳しくは @font-palette-values 規則の説明をご確認ください。

font-palette プロパティに指定可能な値は下記の通りです。

normal カラーフォントがもつ、デフォルトのカラーパレットを使用するように指定します。フォント内における、インデックス 0 のカラーパレット使用されることになります。
light 「背景が明るい（白に近い）」場合に使用されるカラーパレットがカラーフォント内で定義されている場合はそれを使用します。そのような定義がない場合は normal と同じです。
dark 「背景が暗い（黒に近い）」場合に使用されるカラーパレットがカラーフォント内で定義されている場合はそれを使用します。そのような定義がない場合は normal と同じです。
<palette-identifier> @font-palette-values 規則で定義した、カスタムカラーパレットの名前を指定します。もし @font-palette-values 規則による定義が見つからない場合は、normal として振る舞います。
palette-mix() palette-mix() 関数は、normal、light、dark キーワードや、<palette-identifier> を組み合わせることで、新しいカラーパレットを創り出すことができます。基本的な構文は、color-mix() 関数と同じです。

palette-mix() 関数については、2024年8月時点において、一部ブラウザ（Safari、および Firefox）がサポートしていないため利用時には注意してください（下記参考）。

font-paletteのサンプルソース

/* ダークモード時に、それに適したカラーパレットを使用する例  */
@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}
/* 2つのカラーパレット間でアニメーションする例  */
@font-palette-values --pink {
  font-family: Nabla;
  base-palette: 1;
}

@font-palette-values --yellow {
  font-family: Nabla;
  base-palette: 7;
}

@keyframes animate-palette {
  from {
    font-palette: --yellow;
  }
  to {
    font-palette: --pink;
  }
}

p {
  font-family: Nabla;
  animation: animate-palette 1.4s infinite alternate linear;
}
@font-palette-values --blueNabla {
  font-family: Nabla;
  base-palette: 2;
}

@font-palette-values --yellowNabla {
  font-family: Nabla;
  base-palette: 7;
}

.yellowPalette {
  font-palette: --yellowNabla;
}

.bluePalette {
  font-palette: --blueNabla;
}

.mixedPalette {
  font-palette: palette-mix(in lch, --blueNabla 55%, --yellowNabla 45%);
}

主要ブラウザの対応

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

関連するプロパティ

仕様書

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

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

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

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

Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome