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

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

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

構文

特性値のブロック

@swash

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

@annotation

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

@ornaments

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

@stylistic

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

@styleset

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

@character-variant

font-variant-alternatescharacter-variant() 関数記法に渡される特性名を指定します。異体字 (character-variant) の特性値に定義できる値は 1 個または 2 個です。ident1: 3cv03=1 に対応付けされ、ident2: 2 4cv02=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

ブラウザーの互換性

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-feature-values
@annotation
@character-variant
@historical-forms
@ornaments
@styleset
@stylistic
@swash

Legend

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

Full support
Full support
No support
No support

関連情報