CSS の font-feature-settings プロパティは、 OpenType フォントの拡張タイポグラフィの特性を制御します。

構文

/* 既定の設定を使用する */
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: 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 の範囲外の文字を含む場合、プロパティ全体が無効になります。
値は正の整数です。キーワード onoff はそれぞれ 10 の別名です。値が設定されていなければ、既定値は 1 です。 非真偽値の OpenType 特性 (例: stylistic alternates) では、この値は選ばれる特定のグリフを意味します。真偽値の特性はオンとオフを切り替えます。

形式文法

normal | <feature-tag-value>#

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

/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }

/* convert both upper and lowercase to small caps (affects punctuation also) */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* use zeros with a slash through them to differentiate from "O" */

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

/* enable historical forms */
.hist { font-feature-settings: "hist"; }

/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }

/* enable tabular (monospaced) figures */
td.tabular { font-feature-settings: "tnum"; }

/* enable automatic fractions */
.fractions { font-feature-settings: "frac"; }

/* use the second available swash character */
.swash { font-feature-settings: "swsh" 2; }

/* enable stylistic set 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

仕様書

仕様書 状態 備考
CSS Fonts Module Level 3
font-feature-settings の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 48
完全対応 48
完全対応 16
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 15Firefox 完全対応 34
補足
完全対応 34
補足
補足 The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
完全対応 15
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
IE 完全対応 10Opera 完全対応 35
完全対応 35
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 9.1
完全対応 9.1
未対応 4 — 6
WebView Android 完全対応 4.4Chrome Android 完全対応 48Edge Mobile 完全対応 ありFirefox Android 完全対応 34
補足
完全対応 34
補足
補足 The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
完全対応 15
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
Opera Android 完全対応 ありSafari iOS 完全対応 9.3
完全対応 9.3
未対応 3.2 — 6.1
Samsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,