@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-valuesCSSアットルールで、フォントメーカーが作成した 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@font-palette-values
base-palette
font-family
override-colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報