Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

font-variant-ligatures

font-variant-ligatures は CSS のプロパティで、適用される用途の文字コンテンツで使われる合字および文脈に合わせた字形を制御します。これにより、結果のテキストでより調和した形を利用することができます。

リガチャ合字制御

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-ligatures
34
79
34
9.1
34
9.3
common-ligatures
31
79
34
7
31
7
contextual
31
79
34
7
31
7
discretionary-ligatures
31
79
34
7
31
7
historical-ligatures
31
79
34
7
31
7
no-common-ligatures
31
79
34
7
31
7
no-contextual
31
79
34
7
31
7
no-discretionary-ligatures
31
79
34
7
31
7
no-historical-ligatures
31
79
34
7
31
7
none
31
79
34
7
31
7
normal
31
79
34
7
31
7
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (31)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (31)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)

基本構文

CSS 
.elegant {
  font-variant-ligatures: common-ligatures
    discretionary-ligatures;
}
.code {
  font-variant-ligatures: none;
}

ライブデモ

combinecharacter with(common)

CSS combinecharacter with(common) demo.

プレビュー全画面表示

combinecharacter none(none)

CSS combinecharacter none(none) demo.

プレビュー全画面表示

combinecharacter(discretionary)

CSS combinecharacter(discretionary) demo.

プレビュー全画面表示

実務での使いどころ

  • コードブロックのリガチャ制御

    コードフォントでプログラミング用リガチャ（!=, =>など）を有効にしつつ、コードの正確性が求められる場面では無効にします。

注意点

  • font-variant-ligatures: noneはすべてのリガチャを無効にしますが、アラビア語など合字が必要な文字体系では表示が崩れる場合があります。

アクセシビリティ

  • リガチャは視覚的な結合のみであり、テキストの選択やコピー、スクリーンリーダーの読み上げには影響しません。

参考リンク