ほんっとにはじめての HTML5 と CSS3

font-variant-ligaturesプロパティは、使用するフォントに「リガチャ（合字）」が含まれていれば、その合字の表示をするかどうか指定します。
リガチャは欧文フォント専用のモノ。日本語の文字には無いので、ちょっと馴染みが薄いですね。

このプロパティは、IE・Edge 以外のブラウザは対応しているようです。（2018年5月記）
IE・Edge は font-feature-settingsプロパティを使えばリガチャも表示できます。
（font-feature-settingsプロパティについては、【31】OpenType機能を直接指定できる font-feature-settingsプロパティをご覧ください）

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-variant-ligatures - CSS | MDN

font-variant-ligaturesプロパティの値

font-variant-ligaturesプロパティの値
キーワード	normalがデフォルト値。 none、common-ligatures、no-common-ligatures、discretionary-ligatures、no-discretionary-ligatures、historical-ligatures、no-historical-ligatures、contextual、no-contextual
グローバル値	font-variant-ligatures: inherit; 親の値を継承（コレ書かなくても継承するけど） font-variant-ligatures: initial; 継承した親の値を解消しデフォルト値に戻す font-variant-ligatures: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

それぞれのキーワードは、以下の意味があります。
＊キーワードの後の（）内は OpenType機能タグ値（feature-tag-value）です。
（OpenType機能タグ値については、【31】OpenType機能を直接指定できる font-feature-settingsプロパティをご覧ください）

normal

common-ligatures（常用合字）と contextual（前後の文字による字体の変更）を可能にします。それ以外は不可。

none

すべてのリガチャ不可。

common-ligatures（liga, clig）

常用合字（fi fl など）
「常用合字」は、たいていの OTFフォントに含まれている一般的な合字です。（含まれていないフォントもあります）

no-common-ligatures

常用合字を不可にする。

discretionary-ligatures（dlig）

任意のリガチャ（フォントデザイナーが作った合字）
単語の先頭や末尾になる文字に「飾り（ニョロリンとかくるりんとか）」を付けたやつなど、デザイナーによっていろいろです。アイコンフォントもコレに当たります。
有料フォントなら おもしろい合字を含むものがけっこうがあります。例えば下図は King Basil（旧名 Spiffy McGee）というフォント。様々なリガチャが用意されています。

no-discretionary-ligatures

「任意のリガチャ」を不可にする。

historical-ligatures（hlig）

古典的なリガチャ（ドイツ語の t と z の合字 tz など）
（下図は W3C の仕様書のものです）

no-historical-ligatures

「古典的なリガチャ」を不可にする。

contextual（calt）

前後の文字による字体の変更（スクリプト体（筆記体）での「文字の連結」などのこと）
厳密には「合字」ではないけど、前後の文字の組み合わせで形状を変えるという共通点があるのだそうです。（下図は W3C の仕様書のものです）

no-contextual

「前後の文字による字体の変更」を不可にする。

font-variant-ligaturesプロパティを試してみます

font-variant-ligaturesプロパティは、OpenTypeフォントに 該当するフォルムが含まれていなければ表示しません。

というわけで、サンプルは「normal」「none」「common-ligatures」「no-common-ligatures」のキーワードを試してみます。

＊その他のキーワードは 該当する合字を持つフォントを探すのがアレで...割愛いたします。悪しからず。フォントをお持ちの方は試してみてください。

サンプルでは「normal」「common-ligatures」で常用合字が表示されています。
（クリックで 別ページでサンプルが開きます）

サンプルページにも貼ってありますが、HTMLはこちら。

<div class="sample">
  <p class="fvl-nomal">Office. flower.<span>(normal)</span></p>
  <p class="fvl-none">Office. flower.<span>(none)</span></p>
  <p class="fvl-common-li">Office. flower.<span>(common-ligatures)</span></p>
  <p class="fvl-no-common-li">Office. flower.<span>(no-common-ligatures)</span></p>
</div>

CSSはこちら。Safari はベンダープレフィックス -webkit- が必要だそうです。

@font-face {
	font-family: AGara;
	src: url('AGaramondPro-Regular.otf') format("opentype");
    }
.sample {
	font-family:AGara;
	font-size:4rem;
	line-height:1.2
	}
.fvl-nomal {
	-webkit-font-variant-ligatures:normal; /*for Safari*/
	font-variant-ligatures:normal}
.fvl-none {
	-webkit-font-variant-ligatures:none;
	font-variant-ligatures:none}
.fvl-common-li {
	-webkit-font-variant-ligatures:common-ligatures;
	font-variant-ligatures:common-ligatures}
.fvl-no-common-li {
	-webkit-font-variant-ligatures:no-common-ligatures;
	font-variant-ligatures:no-common-ligatures}
.sample p span {
	font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	font-size:15px;
	color:#579961;
	margin-left:.5em;
	font-variant-ligatures: none;
	letter-spacing:normal
	}

letter-spacingプロパティで、1文字ずつの間隔を空けてみると、合字部分が「1文字」になっているのがわかります。
（クリックで 別ページでサンプルが開きます）

Chrome では上記のように表示されますが、ブラウザによっては font-variant-ligatures: none に未対応だったり（noneでもリガチャが使われる）します。（2018年5月記）

次回予告

次回は font-variant-numericプロパティを使ってみよう。
このプロパティは「数（numeric）」を表す文字の表示を指定します。分数とかを表示する時に便利です。

関連記事

• 【33】テキストの整列や両端揃えを指定する text-alignプロパティ
• 【32】インラインの縦方向の整列を決める vertical-alignプロパティ
• 【31】OpenType機能を直接指定できる font-feature-settings
• 【30-7】ショートハンドプロパティになった font-variant
• 【30-6】漢字や仮名のための font-variant-east-asian
• 【30-5】文字の代替えを指定する font-variant-alternates
• 【30-4】数字の表示方法を指定する font-variant-numeric
• 【30-3】リガチャ（合字）を指定する font-variant-ligatures
• 【30-2】上付き・下付き文字を指定する font-variant-position
• 【30-1】スモールキャップなどを指定する font-variant-caps
• 【29】文字間を自動調整してくれる font-kerningプロパティ
• 【28】ボールドやイタリックを合成するか決める font-synthesis
• 【27】フォントサイズを調整する font-size-adjustプロパティ
• （ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて
• （ちょっとメモ）@font-face で Webフォントを使おう