font-variant-ligatures
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
font-variant-ligatures は CSS のプロパティで、適用される用途の文字コンテンツで使われる合字および文脈に合わせた字形を制御します。これにより、結果のテキストでより調和した形を利用することができます。
試してみましょう
font-variant-ligatures: normal; font-variant-ligatures: no-common-ligatures; font-variant-ligatures: common-ligatures; <section id="default-example"> <div id="example-element"> <p>Difficult waffles</p> </div> </section> @font-face { font-family: "Fira Sans"; src: local("FiraSans-Regular"), url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; } section { font-family: "Fira Sans", sans-serif; margin-top: 10px; font-size: 1.5em; } 構文
css
/* キーワード値 */ 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> */ /* 2 つのキーワード値 */ font-variant-ligatures: no-contextual common-ligatures; /* 4 つのキーワード値 */ font-variant-ligatures: common-ligatures no-discretionary-ligatures historical-ligatures contextual; /* グローバル値 */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligatures: revert; font-variant-ligatures: revert-layer; font-variant-ligatures: unset; font-variant-ligatures プロパティは、 normal、none または以下の一覧のキーワード値のうちのいずれかで指定します。
値
normal-
このキーワードは、正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。
none-
。このキーワードは、一般的なものであっても、すべての合字や文脈書式を無効にします。
<common-lig-values>-
fi,ffi,thなどの、よくある合字を制御します。 OpenType の値ligaおよびcligに対応します。2 つの値が指定できます。common-ligatures: これらの合字を有効にします。なお、キーワードnormalはこれらの合字を有効にします。no-common-ligatures: これらの合字を無効にします。
<discretionary-lig-values>-
フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は
dligです。2 つの値が指定できます。discretionary-ligatures: これらの合字を有効にします。no-discretionary-ligatures: これらの合字を無効にします。なお、キーワードnormalはふつう、これらの合字を無効にします。
<historical-lig-values>-
古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は
hligです。2 つの値が指定できます。historical-ligatures: これらの合字を有効にします。no-historical-ligaturesこれらの合字を無効にします。なお、キーワードnormalはふつう、これらの合字を無効にします。
<contextual-alt-values>-
字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は
caltです。2 つの値が指定できます。contextual: 文脈的な変更を使用するよう指定します。なお、キーワードnormalはこれらの合字も有効にします。no-contextual: 使用を避けます。
公式定義
| 初期値 | normal |
|---|---|
| 適用対象 | すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式定義
font-variant-ligatures =
normal |
none |
[ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]
<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
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> CSS
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; } 結果
仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-ligatures-prop |