CSSFontPaletteValuesRule
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月.
CSSFontPaletteValuesRule インターフェイスは @font-palette-values アットルールを表します。
インスタンスプロパティ
祖先である CSSRule から継承したプロパティがあります。
CSSFontPaletteValuesRule.name読取専用-
フォントパレットの名前の文字列です。
CSSFontPaletteValuesRule.fontFamily読取専用-
ルールを適用するフォントファミリーを示す文字列。
CSSFontPaletteValuesRule.basePalette読取専用-
ルールに関連付けられたベースパレットを示す文字列。
CSSFontPaletteValuesRule.overrideColors読取専用-
上書きされるベースパレットの色と新しい色を示す文字列。
インスタンスメソッド
祖先である CSSRule から継承したメソッドがあります。
例
CSSOM を使用した関連するフォントファミリーの読み取り
この例では、最初に @import および @font-palette-values アットルールを定義します。そして、 @font-palette-values ルールを読み込み、その名前を表示します。これらのルールは文書に追加された最後のスタイルシートに存在するため、パレットは文書内の最後のスタイルシート (document.styleSheets[document.styleSheets.length-1].cssRules) が返す 2 つ目の CSSRule にあります。つまり、 rules[1] は CSSFontPaletteValuesRule オブジェクトを返し、そこから fontFamily にアクセスすることができます。
HTML
html
<pre id="log">@font-palette-values アットルールのフォントファミリー:</pre>
CSS
css
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --Alternate {
font-family: "Bungee Spice";
override-colors:
0 #00ffbb,
1 #007744;
}
.alternate {
font-palette: --Alternate;
}
JavaScript
js
const log = document.getElementById("log");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = rules[1]; // CSSFontPaletteValuesRule インターフェイス
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;
結果
仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # om-fontpalettevalues |
ブラウザーの互換性
Loading…