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-palette は CSS のプロパティで、ユーザーエージェントがフォントに使用できるカラーフォントに含まれる多くのパレットの一つを指定できます。ユーザーは、 @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;
}

結果

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

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

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報