@font-palette-values

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.

@font-palette-values は CSS のアットルールで、フォントメーカーが作成した font-palette の既定値をカスタマイズすることができます。

構文

css
@font-palette-values --identifier {   font-family: Bixa; } .my-class {   font-palette: --identifier; }

<dashed-ident> はユーザー定義された識別子で、 CSS カスタムプロパティのように見えますが、別の方法で動作し、 CSS var() 関数で囲まれていません。

記述子

font-family

このパレットを適用できるフォントファミリーの名前を指定します。

base-palette

フォントメーカーが作成した、使用するベースパレットの名前またはインデックスを指定します。

override-colors

上書きするベースパレットの色を指定します。

形式文法

@font-palette-values = 
  @font-palette-values <dashed-ident> { <declaration-list> }

例

既存のパレットの色のオーバーライド

この例は、カラーフォントの色の一部またはすべてを変更する方法を示しています。

HTML

html
<p>default colors</p> <p class="alternate">alternate colors</p>

CSS

css
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice); p {   font-family: "Bungee Spice";   font-size: 2rem; } @font-palette-values --Alternate {   font-family: "Bungee Spice";   override-colors:     0 #00ffbb,     1 #007744; } .alternate {   font-palette: --Alternate; }

結果

インデックス 0 の通常パレットまたはベースパレットの色を上書きする場合、使用するベースパレットを宣言する必要はありません。これは異なるベースパレットを上書きする場合にのみ行う必要があります。すべての色を上書きする場合は、使用するベースパレットを指定する必要はありません。

仕様書

Specification
CSS Fonts Module Level 4
# at-ruledef-font-palette-values

ブラウザーの互換性

関連情報