font-variant-ligatures CSS3

font-variant-ligatures は、文字の結合（合字）の仕方を指定します。

名前:font-variant-ligatures
値: normal | none |
[<common-lig-values>=[ common-ligatures | no-common-ligatures ]
||<discretionary-lig-values>=[ discretionary-ligatures | no-discretionary-ligatures ]
||<historical-lig-values>=[ historical-ligatures | no-historical-ligatures ]
||<contextual-alt-values>=[ contextual | no-contextual ]
]
初期値:normal
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:as specified（指定通り）
アニメーション:できない

Value（値）

normal
初期値 標準
none
無効
common-ligatures
共通の合字（ligature）の表示を有効にする。（一般的な合字はデフォルトで有効）
no-common-ligatures
一般的な合字の表示を無効にする。
discretionary-ligatures
任意の合字の表示を有効にする。
no-discretionary-ligatures
任意の合字の表示を無効にする。
historical-ligatures
歴史的（historical）合字の表示を有効にする。
no-historical-ligatures
歴史的合字の表示を無効にする。
contextual
コンテキスト代替（文字の形状を周囲の文脈と調和させる）の表示を有効にする。ligature のように厳密ではない。
no-contextual
コンテキスト代替の表示を無効にする。

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p { font-family: Meiryo, 'Hiragino Kaku Gothic ProN', Candara; font-size: 30pt; }
   p.test1 { font-variant-ligatures: normal; }
   p.test2 { font-variant-ligatures: none; }
   p.test3 { font-variant-ligatures: common-ligatures; }
  </style>
 </head>
 <body>
   <p class="test1">fi</p>
   <p class="test2">fi</p>
   <p class="test3">fi</p>
 </body>
</html>

display

ff fi fl

ff fi fl

ff fi fl

※ Google Chrome 64.0.3282.186、Firefox58.0.2にて表示確認（2018/3/3）

上に戻る