font-feature-settings は CSS の記述子で、@font-face アットルールで定義されたフォントに使用する初期設定を定義します。さらに、この記述子を使用して、@font-face で定義されたフォントの合字、スモールキャップ、スワッシュなどの字体フォント機能を制御することができます。この記述子の値は、グローバルキーワード値を除いてfont-feature-settings プロパティと同じです。

この記述子は、要素全体ではなく@font-face アットルールのフォントオブジェクトに機能値を設定するので、この記述子を使用してレンダリングされるのは要素内の一部の字体だけかもしれません。

構文

/* 既定の設定を使用 */font-feature-settings: normal;/* OpenType 特性タグの値を設定 */font-feature-settings: "smcp";font-feature-settings: "smcp" on;font-feature-settings: "swsh" 2;

値

この記述子は、キーワードnormal または<feature-tag-value> 値のカンマ区切りリストとして指定します。テキストをレンダリングするとき、 OpenType の<feature-tag-value> 値のリストは、テキストレイアウトエンジンに渡されてフォント特性を有効または無効にします。

normal

テキストが既定のフォント設定でレイアウトされることを示します。これが既定値です。

<feature-tag-value>

タグ名とオプション値からなる、空間区切りのタプルを表します。

タグ名は<string> で、常に 4 つのASCII 文字からなります。タグ名の文字数が多かったり少なかったり、U+20 –U+7E コードポイント範囲外の文字を格納している場合、記述子は無効になります。

オプション値は正の整数か、キーワードon またはoff にすることができます。キーワードon およびoff は、それぞれ値1 および0 と同義語です。値が設定されていない場合は、既定で1 になります。論理値でない OpenType 特性 （stylistic alternates など）では、この値は選択する具体的な字体を意味し、論理値の特性の場合は、その特性のオンとオフを意味します。

公式定義

形式文法

font-feature-settings =
normal|
<feature-tag-value>#

例

@font-face アットルールを使用してスワッシュ字体を有効化

この例では、タグ名swsh と論理値1 が、@font-face アットルールのfont-feature-settings 記述子の値として使用されています。

HTML

<p>Swash is off here</p><p>Swash is on here</p>

CSS

@font-face {  font-family: MonteCarlo;  src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");}@font-face {  font-family: MonteCarlo2;  src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");  font-feature-settings: "swsh" 1;}p {  font-size: 3rem;  margin: 0.7rem 3rem;}.swash-off {  font-family: MonteCarlo, cursive;}.swash-on {  font-family: MonteCarlo2, cursive;}

結果

1 行目はMonteCarlo フォントの既定の装飾的なデザインを示し、 2 行目は既定の字体をスワッシュ字体に置き換えています。

仕様書

ブラウザーの互換性

関連情報

• その他の@font-face 記述子:font-family,font-style,font-variation-settings,font-weight,src
• 関連フォントプロパティ:font-feature-settings,font-variant-alternates,font-variation-settings