base-palette

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2022年11月⁩.

base-palette は CSS の記述子で、新しいパレットを作成する際に使用する定義済みパレットの名前またはインデックスを指定するために使用します。指定された base-palette が存在しない場合、インデックス 0 で定義されたパレットが使用されます。

構文

css

@font-palette-values --one { base-palette: 1; }

base-palette 記述子は、フォントメーカーが作成したパレットのゼロ基点のインデックスを使用して指定します。

値

<index>: 使用する定義済みパレットのインデックスを指定します。

公式定義

関連するアット規則	`@font-palette-values`
初期値	`n/a (required)`
計算値	指定通り

形式文法

base-palette = 
 light |
 dark |
 <integer [0,∞]>

例

フォントの既定のパレットを変更

Rocher カラーフォントを用いて、この例ではフォントの既定パレットをフォントメーカーが作成した代替パレットに切り替える例を 2 つ示します。

HTML

html

<h2>default base-palette</h2> <h2 class="two">base-palette at index 2</h2> <h2 class="five">base-palette at index 5</h2>

CSS

css

@font-face { font-family: "Rocher"; src: url("[path-to-font]/RocherColorGX.woff2") format("woff2"); } h2 { font-family: "Rocher"; } @font-palette-values --two { font-family: "Rocher"; base-palette: 2; } @font-palette-values --five { font-family: "Rocher"; base-palette: 5; } .two { font-palette: --two; } .five { font-palette: --five; }