CSSFontPaletteValuesRule: basePalette プロパティ
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月.
basePalette は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、このルールに関連付けられたベースパレットを示します。
値
次の色値のいずれかを指定する文字列です。
light-
フォントファイル内で、明るい背景に適用できるものとしてマークされている、つまり白に近い最初のパレットに一致します。フォント内にパレットがない場合、または要求されたメタデータを持つパレットがない場合、この値は
"0"と等しくなります。 dark-
フォントファイル内で、暗い背景に適用できるものとしてマークされている、つまり黒に近い最初のパレットに一致します。フォント内にパレットがない場合、あるいは要求されたメタデータを持つパレットがない場合、この値は
"0"と等しくなります。 - インデックスの入った文字列（
"0","1", …など） -
インデックスに対応するパレットと一致します。最初のパレットは
"0"に対応します。
例
関連付けられたベースパレットの読み取り
この例では、文書に追加されたスタイルシートにルールを追加し、文書内の最後のスタイルシートとして返しています (document.styleSheets[document.styleSheets.length-1].cssRules)。したがって、 rules[2] は最初の CSSFontPaletteValuesRule オブジェクトを返し、 rules[3] は 2 つ目のオブジェクトを返します。
HTML
<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>
<pre id="log"></pre>
CSS
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");
h2 {
font-family: "Nabla";
}
@font-palette-values --two {
font-family: "Nabla";
base-palette: 2;
}
@font-palette-values --five {
font-family: "Nabla";
base-palette: 5;
}
.two {
font-palette: --two;
}
.five {
font-palette: --five;
}
JavaScript
const log = document.getElementById("log");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const twoRule = rules[2]; // CSSFontPaletteValuesRule インターフェイス
const fiveRule = rules[3]; // CSSFontPaletteValuesRule インターフェイス
log.textContent = `${twoRule.name} の @font-palette-values のベースパレット: ${twoRule.basePalette}\n`;
log.textContent += `${fiveRule.name} の @font-palette-values のベースパレット: ${fiveRule.basePalette}`;
結果
仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-basepalette |
ブラウザーの互換性
Loading…
関連情報
@font-palette-valuesat-rulebase-palettedescriptor