CSSFontPaletteValuesRule: fontFamily プロパティ

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.

fontFamily は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、ルールが適用可能なフォントファミリーを列挙します。フォントファミリーは名前付きファミリーでなければならず、 courier のような汎用ファミリーは無効です。

値

このルールを適用できるフォントファミリーのリストを空白区切りで格納した文字列です。

この例では、最初に @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

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 # dom-cssfontpalettevaluesrule-fontfamily

ブラウザーの互換性

BCD tables only load in the browser