CSSのfont-variant-ligaturesで合字の制御方法をわかりやすく解説

2024.09.15
スポンサーリンク

font-variant-ligaturesプロパティは、タイポグラフィにおける合字（リガチャ）を制御するために使用されます。合字とは、2つ以上の文字を組み合わせて1つの文字として表示する技術です。このプロパティを使うことで、合字の有効・無効を設定し、特定の合字セットを制御できます。ブラウザによっては対応していません。

スポンサーリンク

font-variant-ligaturesの値とその効果の一覧

  • normal: 通常の合字が適用されます（標準的な合字）。
  • none: 合字が無効化され、全ての文字が個別に表示されます。
  • common-ligatures: 標準的な合字（fi, flなど）が適用されます。
  • no-common-ligatures: 標準的な合字が無効化されます。
  • discretionary-ligatures: 装飾的な合字が適用されます。
  • no-discretionary-ligatures: 装飾的な合字が無効化されます。
  • historical-ligatures: 古書的な合字が適用されます。
  • no-historical-ligatures: 古書的な合字が無効化されます。
  • contextual: 文脈的な合字が適用されます。
  • no-contextual: 文脈的な合字が無効化されます。

注意点と関連情報

合字はタイポグラフィにおける重要な要素であり、デザインの一貫性や可読性に影響を与えます。font-variant-ligaturesプロパティを使用する際は、選択したフォントが合字をサポートしているか確認することが重要です。サポートしていないフォントでは、このプロパティの効果が得られない場合があります。

font-variant-ligaturesプロパティが効かない時の原因と対策

フォントがサポートしていない

font-variant-ligaturesプロパティは、フォントのリガチャ（合字）を制御するために使用されますが、使用しているフォント自体がリガチャをサポートしていない場合、このプロパティは効果を発揮しません。
対策: 使用しているフォントがリガチャ（標準リガチャ、歴史的リガチャ、コンテキスチュアルリガチャなど）をサポートしているか確認しましょう。サポートされていない場合、リガチャをサポートする別のフォントを選択するか、代替フォントを指定します。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 400px;
  background-color: #f9f9f9;
  text-align: center;
  overflow-wrap: break-word;
}

.css-sample-text {
  font-family: 'Times New Roman', serif;
  font-size: 24px;
}

font-variant-ligatures: normal

標準的な合字が適用される例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-variant-ligatures-normal">fi fl ffi ffl example</p>
</div>

CSSコード

.css-sample-font-variant-ligatures-normal {
  font-variant-ligatures: normal;
}

表示結果

fi fl ffi ffl example

font-variant-ligatures: none

合字を無効にした例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-variant-ligatures-none">fi fl ffi ffl example</p>
</div>

CSSコード

.css-sample-font-variant-ligatures-none {
  font-variant-ligatures: none;
}

表示結果

fi fl ffi ffl example

font-variant-ligatures: discretionary-ligatures

装飾的な合字が適用される例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-variant-ligatures-discretionary-ligatures">fi fl ffi ffl example</p>
</div>

CSSコード

.css-sample-font-variant-ligatures-discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

表示結果

fi fl ffi ffl example

font-variant-ligatures: historical-ligatures

古書的な合字が適用される例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-variant-ligatures-historical-ligatures">fi fl ffi ffl example</p>
</div>

CSSコード

.css-sample-font-variant-ligatures-historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

表示結果

fi fl ffi ffl example

まとめ

  • font-variant-ligaturesプロパティは、テキストの合字を制御するために使用されます。
  • 標準的な合字だけでなく、装飾的な合字や古書的な合字も設定可能です。
  • 選択したフォントが合字をサポートしている場合にのみ効果があります。
スポンサーリンク