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 |