@font-feature-values

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

@font-feature-values は CSS のアットルールで、OpenType で有効化された特性が異なるものに対して font-variant-alternates プロパティで共通の名前を使用することができます。これは、複数のフォントを使用している場合に CSS を簡素化するのに役立ちます。

@font-feature-values アットルールは、CSS の最上位で使用することも、任意の CSS の条件付きグループアットルールの内部で使用することもできます。

構文

特性値のブロック

@swash

font-variant-alternates の swash() 関数記法に渡される特性名を指定します。文字飾り (swash) の特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。

@annotation

font-variant-alternates の annotation() 関数記法に渡される特性名を指定します。注釈 (annotation) 特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。

@ornaments

font-variant-alternates の ornaments() 関数記法に渡される特性名を指定します。装飾活字 (ornaments) の特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。

@stylistic

font-variant-alternates の stylistic() 関数記法に渡される特性名を指定します。文字様式 (stylistic) の特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。

@styleset

font-variant-alternates の styleset() 関数記法に渡される特性名を指定します。ident1: 2 4 12 1 は、OpenType 値 ss02 および ss04, ss12, ss01 に対応付けされます。99 よりも大きな値は正しいですが、どの OpenType 値にも対応付けされず、無視されます。

@character-variant

font-variant-alternates の character-variant() 関数記法に渡される特性名を指定します。異体字 (character-variant) の特性値に定義できる値は 1 個または 2 個です。ident1: 3 は cv03=1 に対応付けされ、ident2: 2 4 は cv02=4 に対応付けされますが、 ident2: 2 4 5 は無効です。

形式文法

@font-feature-values = 
  @font-feature-values <family-name># { <declaration-rule-list> }  

<family-name> = 
  <string>         |
  <custom-ident>+

例

@font-feature-values ルール内での @styleset の使用

css
/* "nice-style" を Font One に指定するアットルール */
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/* Font Two における "nice-style" のためのアットルール */
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

…

/* 1 回の宣言でアットルールを適用 */
.nice-look {
  font-variant-alternates: styleset(nice-style);
}

仕様書

Specification
CSS Fonts Module Level 4
# font-feature-values

ブラウザーの互換性

関連情報