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.

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`base-palette`

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

Full support: Full support

HTML

CSS

結果

Legend