このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
@font-palette-values
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年11月.
@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>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 |