font-palette

Baseline 2022

Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

font-paletteCSS のプロパティで、ユーザーエージェントがフォントに使用できるカラーフォントに含まれる多くのパレットの一つを指定できます。ユーザーは、 @font-palette-values アットルールを使って、パレットの値を上書きしたり、新しいパレットを作成したりすることもできます。

メモ: font-palette はフォントに色を付けるときに優先されます。 color プロパティは、たとえ !important が指定されていても、フォントパレットを上書きすることはありません。

構文

css
/* フォントが定義したパレットを使用 */
font-palette: normal;

/* ユーザーが定義したパレットを使用 */
font-palette: --one;

/* 2 色を混合した新しいパレットを作成 */
font-palette: palette-mix(in lch, --blue, --yellow);

normal

フォントに使用する既定色パレットまたは既定の字体着色(フォントメーカーが設定する)を指定します。この設定では、インデックス 0 のフォント内のパレットがレンダリングされます。

light

フォントの中で 'light' に一致する最初のパレットを指定します。フォントによっては、明るい(白に近い)背景に適用できるパレットを識別するメタデータを含むものがあります。フォントがこのメタデータを持っていない場合、 light の値は normal として動作します。

dark

フォントの中で 'dark' に一致する最初のパレットを指定します。フォントによっては、位(黒に近い)背景に適用できるパレットを識別するメタデータを含むものがあります。フォントがこのメタデータを持っていない場合、この値は normal として動作します。

<palette-identifier>

@font-palette-values アットルールを使用して、フォントパレットに自分自身で値を指定できるようにします。この値は <dashed-ident> 形式を使用して指定します。

palette-mix()

指定したパーセント値と色補間方法で、 2 つのフォントパレット値を混合して新しい font-palette 値を作成します。

公式定義

初期値normal
適用対象すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類by computed value

形式文法

font-palette = 
normal |
light |
dark |
<palette-identifier> |
<palette-mix()>

<palette-mix()> =
palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )

<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65

<polar-color-space> =
hsl |
hwb |
lch |
oklch

<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue

暗いパレットの指定

この例では、フォントメーカーによって dark (黒に近い背景でうまく動作します)とマークされた最初のパレットを使用することができます。

css
@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}

2 つのパレットの間をアニメーション

この例では、 font-palette の値の変化をアニメーション化して、滑らかなフォントアニメーションを作成する方法を示します。

HTML

HTML には、アニメーションするテキストの単一の段落があります。

html
<p>color-palette<br />animation</p>

CSS

この CSS では、 Google Fonts から Nabla という色フォントをインポートし、独自の 2 つの font-palette 値を @font-palette-values アットルールを使用して定義しています。そして、この 2 つのパレットの間でアニメーションする @keyframes を作成し、このアニメーションを段落に適用します。

css
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

@font-palette-values --blueNabla {
  font-family: Nabla;
  base-palette: 2; /* Nabla の青色パレット */
}

@font-palette-values --greyNabla {
  font-family: Nabla;
  base-palette: 3; /* Nabla の灰色パレット */
}

@keyframes animate-palette {
  from {
    font-palette: --greyNabla;
  }

  to {
    font-palette: --blueNabla;
  }
}

p {
  font-family: "Nabla";
  font-size: 5rem;
  margin: 0;
  text-align: center;
  animation: animate-palette 4s infinite alternate linear;
}

結果

出力結果は次のようになります。

メモ: まだ discretefont-palette アニメーションを実装しているブラウザーは、スムーズにアニメーションするのではなく、 2 つのパレットの間で切り替わります。

仕様書

Specification
CSS Fonts Module Level 4
# font-palette-prop

ブラウザーの互換性

BCD tables only load in the browser

関連情報