1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. アットルール
  5. @font-feature-values

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

@font-feature-values

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年3月以降、すべてのブラウザーで利用可能です。

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

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

構文

css
@font-feature-values Font Name {
 font-display: swap;
 @styleset {
 nice-style: 12;
 }
 @swash {
 fancy: 2;
 }
}

それぞれの @font-feature-values ブロックには、特性値のブロックのリスト(下記参照)と、 font-display 記述子が入ります。

特性値のブロック

@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 <font-family-name># { <declaration-rule-list> }

<font-family-name> =
<string> |
<custom-ident> +
この構文は CSS Fonts Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

@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);
}

仕様書

仕様書
CSS Fonts Module Level 4
# font-feature-values

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

AltStyle によって変換されたページ (->オリジナル) /