font-feature-settings

font-feature-settings は CSS のプロパティで、 OpenType フォントの拡張書体の特性を制御します。

試してみましょう

構文

css

/* 既定の設定を使用する */
font-feature-settings: normal;

/* OpenType の特性タグの値を設定する */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings: "smcp", "swsh" 2;

/* グローバル値 */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: unset;

可能な限り、ウェブの作者は代わりに font-variant 一括指定プロパティ、または関連する個別指定プロパティである font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric, font-variant-position プロパティを使うべきです。

これらは font-feature-settings よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 font-feature-settings は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に font-feature-settings を使うべきではありません。

値

normal

テキストは既定の設定で配置されます。

<feature-tag-value>

テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の <string> です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。
値は正の整数です。キーワード on と off はそれぞれ 1 と 0 の別名です。値が設定されていなければ、既定値は 1 です。 論理値ではない OpenType 特性 (例: stylistic alternates) では、この値は選ばれる特定の字形を意味します。論理値の特性はオンとオフを切り替えます。

公式定義

初期値normal
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

形式定義

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

<feature-tag-value> = 
  <string> [ <integer> | on | off ]?

例

様々なフォント特性を有効にする

css

/* スモールキャップ代替字形 */
.smallcaps { font-feature-settings: "smcp" on; }

/* 大文字と小文字の両方をスモールキャップに変換 (記号も) */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* スラッシュのついたゼロを使用して "O" と区別する */

.nicezero { font-feature-settings: "zero"; }

/* 歴史的な書体を有効に */
.hist { font-feature-settings: "hist"; }

/* よくある合字を無効にする (既定ではオン) */
.noligs { font-feature-settings: "liga" 0; }

/* 表内の数字を有効にする (等幅) */
td.tabular { font-feature-settings: "tnum"; }

/* 自動的に分数化する */
.fractions { font-feature-settings: "frac"; }

/* 利用可能な2番目のスウォッシュ文字を使用 */
.swash { font-feature-settings: "swsh" 2; }

/* スタイリッシュセット 7 を有効にする */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

仕様書

Specification
CSS Fonts Module Level 4
# font-feature-settings-prop

ブラウザーの互換性

BCD tables only load in the browser

関連情報