font-family

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 の記述子である font-family は、どのフォントファミリーのパレット値を適用するかを指定するために使用します。これは、 CSS の font-familyを設定するときに使用する値と正確に一致する必要があります。

構文

css
@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

html
<h2>This is spicy</h2>
<h2 class="extra-spicy">This is extra hot & spicy</h2>

CSS

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 プロパティを設定するのに役立ちます。これは、サイトのブランディングに一致するようにフォントの色を更新したいときに有益なことができます。

css
@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

ブラウザーの互換性

BCD tables only load in the browser

関連情報