base-palette
Baseline 2022Newly 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;
}
結果
仕様書
Specification |
---|
CSS Fonts Module Level 4 # base-palette-desc |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
base-palette |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.