base-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.

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;
}

結果

Example showing 3 different base-palettes of Rocher color font

仕様書

Specification
CSS Fonts Module Level 4
# base-palette-desc

ブラウザーの互換性

BCD tables only load in the browser

関連情報