Widely available 安全に使用可能。ただし可能な限り font-variant-* 系プロパティを優先すること。

font-feature-settings

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

フォントOpenType

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-feature-settings
48
15
34
9.1
48
9.3
CSS @ ルール
font-feature-settings

font-feature-settings は CSS の記述子で、 @font-face アットルールで定義されたフォントに使用する初期設定を定義します。さらに、この記述子を使用して、 @font-face で定義されたフォントの合字、スモールキャップ、スワッシュなどの字体フォント機能を制御することができます。この記述子の値は、グローバルキーワード値を除いて font-feature-settings プロパティと同じです。
140
140
34
10
140
10
CSS プロパティ
normal
16
15
15
9.1
18
9.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (16)
注釈 5件
実装メモ
  • ISO/IEC CD 14496-22 第 3 版では、「ssty」機能を使用して、スクリプトでの使用により適したグリフ バリアント (たとえば、上付き文字として使用される素数) を提供することが推奨されています。 Firefox 29 以降、これは MathML レンダリング エンジンによって自動的に行われます。 ISO/IEC CD 14496-22 第 3 版では、数学的アクセントを配置してドットのない形式 (たとえば、ドットのない i、帽子付きの j) を取得するときに、文字に「dtls」機能を適用することも提案しています。 Firefox 35 以降、これは MathML レンダリング エンジンによって自動的に行われます。 MathML レンダリング エンジンによって決定されたデフォルト値を CSS でオーバーライドできます。
  • Firefox 4 から Firefox 14 (これを含む) まで、Firefox は少し異なる古い構文をサポートしていました。 「Firefox 4 での OpenType フォント機能のサポート」を参照してください。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (129)
  • Firefox 129 から、ベンダー プレフィックスを引き続きサポートしているサポート サイトに `-webkit-font-feature-settings` エイリアスが追加されました。
  • ベンダープレフィックス付きで対応: -moz- (15)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 3件
実装メモ
  • ISO/IEC CD 14496-22 第 3 版では、「ssty」機能を使用して、スクリプトでの使用により適したグリフ バリアント (たとえば、上付き文字として使用される素数) を提供することが推奨されています。 Firefox 29 以降、これは MathML レンダリング エンジンによって自動的に行われます。 ISO/IEC CD 14496-22 第 3 版では、数学的アクセントを配置してドットのない形式 (たとえば、ドットのない i、帽子付きの j) を取得するときに、文字に「dtls」機能を適用することも提案しています。 Firefox 35 以降、これは MathML レンダリング エンジンによって自動的に行われます。 MathML レンダリング エンジンによって決定されたデフォルト値を CSS でオーバーライドできます。
  • Firefox 4 から Firefox 14 (これを含む) まで、Firefox は少し異なる古い構文をサポートしていました。 「Firefox 4 での OpenType フォント機能のサポート」を参照してください。
対応条件
  • ベンダープレフィックス付きで対応: -moz- (15)

基本構文

CSS 
/* Enable ligatures */
.ligatures {
  font-feature-settings: "liga" 1, "clig" 1;
}

/* Old-style numbers */
.old-style-nums {
  font-feature-settings: "onum" 1;
}

/* Small caps */
.small-caps {
  font-feature-settings: "smcp" 1;
}

ライブデモ

combinecharacter(ligature)

font-feature-settings combinecharacter(ligature) demo.

プレビュー全画面表示

oldstylenumbercharacter

font-feature-settings oldstylenumbercharacter demo.

プレビュー全画面表示

smo-lcapss

font-feature-settings smo-lcapss demo.

プレビュー全画面表示

実務での使いどころ

  • 高品質なタイポグラフィ

    プロフェッショナルなフォントの合字やカーニング機能を活用し、印刷品質に近い組版を実現する。

  • 表形式の数字揃え

    tnum（表形式数字）を有効にして、数値データの桁揃えを美しく行える。

注意点

  • フォント自体が対応していない OpenType 機能を指定しても効果がない。
  • font-feature-settings は低水準 API であり、複数の設定が競合する可能性がある。font-variant-* 系を優先すること。

アクセシビリティ

  • 合字が有効な場合でもスクリーンリーダーは個別の文字として読み上げるため、読み上げへの影響は少ない。

参考リンク