CSSFontPaletteValuesRule: fontFamily プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2022.

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

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

ブラウザーの互換性

関連情報