font-variant-ligatures
は CSS のプロパティで、適用される用途の文字コンテンツで使われる合字および文脈に合わせた字形を制御します。これにより、結果のテキストでより調和した形を利用することができます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* キーワード値 */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: contextual; /* <contextual-alt-values> */
font-variant-ligatures: no-contextual; /* <contextual-alt-values> */
/* グローバル値 */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;
font-variant-ligatures
プロパティは、以下の一覧のキーワード値のうち一つで指定します。
値
normal
- 正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。
none
- 一般的なものであっても、すべての合字や文脈書式を無効にします。
- <common-lig-values>
fi
,ffi
,th
などの、よくある合字を制御します。 OpenType の値liga
およびclig
に対応します。二つの値が指定できます。common-ligatures
: これらの合字を有効にします。なお、キーワードnormal
はこれらの合字を有効にします。no-common-ligatures
: これらの合字を無効にします。
- <discretionary-lig-values>
- フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は
dlig
です。二つの値が指定できます。discretionary-ligatures
: これらの合字を有効にします。no-discretionary-ligatures
: これらの合字を無効にします。なお、キーワードnormal
はふつう、これらの合字を無効にします。
- <historical-lig-values>
- 古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は
hlig
です。二つの値が指定できます。historical-ligatures
: これらの合字を有効にします。no-historical-ligatures
これらの合字を無効にします。なお、キーワードnormal
はふつう、これらの合字を無効にします。
- <contextual-alt-values>
- 字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は
calt
です。二つの値が指定できます。contextual
: 文脈的な変更を使用するよう指定します。なお、キーワードnormal
はこれらの合字も有効にします。no-contextual
: 使用を避けます。
公式定義
初期値 | normal |
---|---|
適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
形式文法
normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]where
<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 ]
例
フォントの合字と文脈に合わせた字形の設定
HTML
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<p class="normal">
normal<br>
if fi ff tf ft jf fj
</p>
<p class="none">
none<br>
if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
common-ligatures<br>
if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
no-common-ligatures<br>
if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
discretionary-ligatures<br>
if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
no-discretionary-ligatures<br>
if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
historical-ligatures<br>
if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
no-historical-ligatures<br>
if fi ff tf ft jf fj
</p>
<p class="contextual">
contextual<br>
if fi ff tf ft jf fj
</p>
<p class="no-contextual">
no-contextual<br>
if fi ff tf ft jf fj
</p>
<p class="contextual">
contextual<br>
if fi ff tf ft jf fj
</p>
CSS
p {
font-family: Lora, serif;
}
.normal {
font-variant-ligatures: normal;
}
.none {
font-variant-ligatures: none;
}
.common-ligatures {
font-variant-ligatures: common-ligatures;
}
.no-common-ligatures {
font-variant-ligatures: no-common-ligatures;
}
.discretionary-ligatures {
font-variant-ligatures: discretionary-ligatures;
}
.no-discretionary-ligatures {
font-variant-ligatures: no-discretionary-ligatures;
}
.historical-ligatures {
font-variant-ligatures: historical-ligatures;
}
.no-historical-ligatures {
font-variant-ligatures: no-historical-ligatures;
}
.contextual {
font-variant-ligatures: contextual;
}
.no-contextual {
font-variant-ligatures: no-contextual;
}
.contextual {
font-variant-ligatures: contextual;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Fonts Module Level 3 font-variant-ligatures の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。