CSSFontPaletteValuesRule: name プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2022年11月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

name は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、関連付けられた @font-palette-values アットルールを識別する名前を表します。有効な名前は常に 2 つのダッシュで始まり、 --Alternate のようになります。

この例では、最初に @import および @font-palette-values アットルールを定義します。そして、 @font-palette-values ルールを読み込み、その名前を表示します。これらのルールは文書に追加された最後のスタイルシートに存在するため、パレットは文書内の最後のスタイルシート (document.styleSheets[document.styleSheets.length-1].cssRules) が返す 2 つ目の CSSRule にあります。つまり、 rules[1] は CSSFontPaletteValuesRule オブジェクトを返し、そこから name にアクセスすることができます。

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.name}`;