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.

* Some parts of this feature may have varying levels of support.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-palette
Animation of font-palette by computed value
Experimental
dark
light
normal
palette-mix()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報