CSSFontPaletteValuesRule

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.

CSSFontPaletteValuesRule インターフェイスは @font-palette-values アットルールを表します。

CSSRule CSSFontPaletteValuesRule

インスタンスプロパティ

祖先である 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

ブラウザーの互換性

BCD tables only load in the browser

関連情報