font-variant-ligaturesプロパティ

最終更新日：2023-11-26
公開日：2023-11-07

font-variant-ligaturesプロパティはアルファベットの合字や文脈に合わせた字形を制御するために使用します。

初期値

normal
継承

継承あり
適用できる要素

全要素とテキスト

font-variant-ligaturesプロパティに指定できる値

font-variant-ligaturesプロパティはアルファベットにおける「Difficult」や「Office」で一般的に使われる「ff」や「fi」の合字、文脈に合わせた字形調整を制御する際に使用します。
以下の値を指定することができます。

値	OpenType 対応する値	内容
`normal`		初期値。字形の制御はせず、合字や字形変形が適用されるときはそのまま表示します。
`none`		合字や字形変形を無効にします。
`common-ligatures`	`liga`、`clig`	合字を有効にします。`normal`を指定したときも基本的には有効になります。
`no-common-ligatures`	`liga`、`clig`	合字を無効にします。
`discretionary-ligatures`	`dlig`	合字を有効にします。
`no-discretionary-ligatures`	`dlig`	合字を無効にします。`normal`を指定したときも基本的には無効になります。
`historical-ligatures`	`hlig`	ドイツ語の`tz`を`ꜩ`と表示する合字を有効にします。
`no-historical-ligatures`	`hlig`	ドイツ語の`tz`を`ꜩ`と表示する合字を無効にします。
`contextual`	`calt`	文脈的な文字の変更を有効にします。
`no-contextual`	`calt`	文脈的な文字の変更を無効にします。

以降はfont-variant-ligaturesプロパティを使用するコード例とブラウザの表示例を紹介します。

使用例: アルファベットの合字

Googleフォントより公開されている「Fira Sans」のフォントを使い、アルファベットに対してfont-variant-east-ligaturesプロパティを指定した例です。
コードの赤いの箇所がfont-variant-ligaturesプロパティの指定と、適用するテキストになります。
（Fira Sans - Googleフォント）

CSS コード例

.sample1 section {
  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.sample1 section.first {
  border-top: 1px solid #ccc;
}
.sample1 section h2 {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample1 p {
  font-family: 'Fira Sans', sans-serif;
  font-size: 40px;
}
.sample1 .text1 {
  font-variant-ligatures: normal;
}
.sample1 .text2 {
  font-variant-ligatures: none;
}
.sample1 .text3 {
  font-variant-ligatures: no-common-ligatures;
}
.sample1 .text4 {
  font-variant-ligatures: common-ligatures;
}

HTML コード例

<div class="sample1">
  <section class="first">
    <h2>font-variant-ligatures: normal;</h2>
    <p class="text1">The Yaffle Office</p>
  </section>
  <section>
    <h2>font-variant-ligatures: none;</h2>
    <p class="text2">The Yaffle Office</p>
  </section>
  <section>
    <h2>font-variant-ligatures: no-common-ligatures;</h2>
    <p class="text3">The Yaffle Office</p>
  </section>
  <section>
    <h2>font-variant-ligatures: common-ligatures;</h2>
    <p class="text4">The Yaffle Office</p>
  </section>
</div>

以下はブラウザ（Chrome）での表示例です。

パッと見た印象では違いが分かりにくいかもしれませんが、以下の合字の表示が異なっていることが分かります。

記事一覧