font-feature-settings

構文

/* 既定の設定を使用 */
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 class="swash-off">Swash is off here</p>
<p class="swash-on">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