font-variant-ligatures
隣接する文字を視覚的に結合するリガチャ(合字)の表示を制御するプロパティです。common-ligatures(fi、flなどの一般的な合字)、discretionary-ligatures(装飾的な合字)、contextual(文脈に応じた合字)などを個別に有効/無効にできます。高品質なタイポグラフィには欠かせない機能です。
概要
隣接する文字を視覚的に結合するリガチャ(合字)の表示を制御するプロパティです。common-ligatures(fi、flなどの一般的な合字)、discretionary-ligatures(装飾的な合字)、contextual(文脈に応じた合字)などを個別に有効/無効にできます。高品質なタイポグラフィには欠かせない機能です。
対応ブラウザ
デスクトップ
Chrome 34+
Edge 79+
Safari 9.1+
Firefox 34+
モバイル
Chrome Android 34+
Safari iOS 9.3+
Firefox Android 34+
基本構文
CSS
.elegant {
font-variant-ligatures: common-ligatures
discretionary-ligatures;
}
.code {
font-variant-ligatures: none;
} 実務での使いどころ
-
コードブロックのリガチャ制御
コードフォントでプログラミング用リガチャ(!=, =>など)を有効にしつつ、コードの正確性が求められる場面では無効にします。
注意点
- font-variant-ligatures: noneはすべてのリガチャを無効にしますが、アラビア語など合字が必要な文字体系では表示が崩れる場合があります。
アクセシビリティ
- リガチャは視覚的な結合のみであり、テキストの選択やコピー、スクリーンリーダーの読み上げには影響しません。