---
title: font-variant-ligatures
slug: Web/CSS/font-variant-ligatures
tags:
  - CSS
  - CSS Fonts
  - CSS Property
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/font-variant-ligatures
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>font-variant-ligatures</code></strong> は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。</span>これにより、結果のテキストでより調和した形を利用することができます。</p>

<div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;           /* &lt;common-lig-values&gt; */
font-variant-ligatures: no-common-ligatures;        /* &lt;common-lig-values&gt; */
font-variant-ligatures: discretionary-ligatures;    /* &lt;discretionary-lig-values&gt; */
font-variant-ligatures: no-discretionary-ligatures; /* &lt;discretionary-lig-values&gt; */
font-variant-ligatures: historical-ligatures;       /* &lt;historical-lig-values&gt; */
font-variant-ligatures: no-historical-ligatures;    /* &lt;historical-lig-values&gt; */
font-variant-ligatures: contextual;                 /* &lt;contextual-alt-values&gt; */
font-variant-ligatures: no-contextual;              /* &lt;contextual-alt-values&gt; */

/* グローバル値 */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;
</pre>

<p><code>font-variant-ligatures</code> プロパティは、以下の一覧のキーワード値のうち一つで指定します。</p>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。</dd>
 <dt><code>none</code></dt>
 <dd>一般的なものであっても、すべての合字や文脈書式を無効にします。</dd>
 <dt><em>&lt;common-lig-values&gt;</em></dt>
 <dd><code>fi</code>, <code>ffi</code>, <code>th</code> などの、よくある合字を制御します。 OpenType の値 <code>liga</code> および <code>clig</code> に対応します。二つの値が指定できます。
 <ul>
  <li><code>common-ligatures</code>: これらの合字を有効にします。なお、キーワード <code>normal</code> はこれらの合字を有効にします。</li>
  <li><code>no-common-ligatures</code>: これらの合字を無効にします。</li>
 </ul>
 </dd>
 <dt><em>&lt;discretionary-lig-values&gt;</em></dt>
 <dd>フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は <code>dlig</code> です。二つの値が指定できます。
 <ul>
  <li><code>discretionary-ligatures</code>: これらの合字を有効にします。</li>
  <li><code>no-discretionary-ligatures</code>: これらの合字を無効にします。なお、キーワード <code>normal</code> はふつう、これらの合字を無効にします。</li>
 </ul>
 </dd>
 <dt><em>&lt;historical-lig-values&gt;</em></dt>
 <dd>古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は <code>hlig</code> です。二つの値が指定できます。
 <ul>
  <li><code>historical-ligatures</code>: これらの合字を有効にします。</li>
  <li><code>no-historical-ligatures</code> これらの合字を無効にします。なお、キーワード <code>normal</code> はふつう、これらの合字を無効にします。</li>
 </ul>
 </dd>
 <dt><em>&lt;contextual-alt-values&gt;</em></dt>
 <dd>字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は <code>calt</code> です。二つの値が指定できます。
 <ul>
  <li><code>contextual</code>: 文脈的な変更を使用するよう指定します。なお、キーワード <code>normal</code> はこれらの合字も有効にします。</li>
  <li><code>no-contextual</code>: 使用を避けます。</li>
 </ul>
 </dd>
</dl>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Setting_font_ligatures_and_contextual_forms" name="Setting_font_ligatures_and_contextual_forms">フォントの合字と文脈に合わせた字形の設定</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"&gt;
&lt;p class="normal"&gt;
  normal&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="none"&gt;
  none&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="common-ligatures"&gt;
  common-ligatures&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="no-common-ligatures"&gt;
  no-common-ligatures&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="discretionary-ligatures"&gt;
  discretionary-ligatures&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="no-discretionary-ligatures"&gt;
  no-discretionary-ligatures&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="historical-ligatures"&gt;
  historical-ligatures&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="no-historical-ligatures"&gt;
  no-historical-ligatures&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="contextual"&gt;
  contextual&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="no-contextual"&gt;
  no-contextual&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;
&lt;p class="contextual"&gt;
  contextual&lt;br&gt;
  if fi ff tf ft jf fj
&lt;/p&gt;

</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">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;
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.font-variant-ligatures")}}</p>