font-family
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 の記述子である font-family は、どのフォントファミリーのパレット値を適用するかを指定するために使用します。これは、 CSS の font-familyを設定するときに使用する値と正確に一致する必要があります。
構文
@font-palette-values --Dark-mode { font-family: "Bungee Spice"; /* other palette settings follow */ } 続く他のパレット値は、指定したフォントファミリーにのみ適用されます。他のフォントファミリーの @font-palette-values は、同じ <dashed-ident>s を用いることで作成することができます。これは、複数のカラーフォントを持っていて、それぞれに同じ識別子を使用することができる、ということを意味しています。
値
<family-name>-
font-family の名前を指定します。
公式定義
| 関連するアット規則 | @font-palette-values |
|---|---|
| 初期値 | n/a (required) |
| 計算値 | 指定通り |
形式文法
font-family =
<family-name>#
<family-name> =
<string> |
<custom-ident>+
例
一致するファミリー名の使用
この例では、 font-family 記述子が @font-palette-values アットルールで使用される場合、 font-family には宣言時と同じ値が使用されます。
HTML
<h2>This is spicy</h2> <h2 class="extra-spicy">This is extra hot & spicy</h2> CSS
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice); @font-palette-values --bungee-extra-spicy { font-family: "Bungee Spice"; override-colors: 0 DarkRed, 1 Red; } h2 { font-family: "Bungee Spice"; } h2.extra-spicy { font-palette: --bungee-extra-spicy; } 結果
複数のフォントファミリーに対して同じパレット識別子を使用
この例では、 2 つの @font-palette-values アットルールが 2 つのフォントファミリーに設定されていますが、どちらのアットルールも同じ dashed-ident 識別子である --Dark Mode を使用しています。これは、複数の要素（この場合 h1 と h2）に対して同時に font-palette プロパティを設定するのに役立ちます。これは、サイトのブランディングに一致するようにフォントの色を更新したいときに有益なことができます。
@font-palette-values --Dark-Mode { font-family: "Bungee Spice"; /* Bungee Spice のためのパレット設定 */ } @font-palette-values --Dark-Mode { font-family: Bixa; /* Bixa のためのパレット設定 */ } h1, h2 { font-palette: --Dark-Mode; } h1 { font-family: "Bungee Spice"; } h2 { font-family: Bixa; } 仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # font-family-2-desc |