@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

ブラウザーの互換性

BCD tables only load in the browser