font-feature-settingsプロパティは、OpenTypeフォントの高度なタイポグラフィ機能を使用するために使われます。指定したフォントの特徴的な機能をカスタマイズでき、リガチャ（合字）やスモールキャップス、歴史的な文字形などを有効にすることができます。
font-feature-settingsの値とその効果の一覧
- ‘liga’ 1: リガチャ（合字）を有効にする。
- ‘smcp’ 1: 小文字をスモールキャップスに変換する。
- ‘tnum’ 1: 固定幅の数字を使用する。
- ‘hist’ 1: 歴史的な文字形を使用する。
注意点と関連情報
OpenTypeフォントに依存するため、フォントによっては指定した機能がサポートされていない場合があります。そのため、必ずフォントがこれらの機能をサポートしているか確認してください。
font-feature-settingsプロパティが効かない時の原因と対策
フォントがOpenTypeの機能をサポートしていない
font-feature-settingsプロパティは、OpenTypeフォントに特定のタイポグラフィ機能を適用するために使用されますが、使用しているフォント自体がその機能をサポートしていない場合、効果が適用されません。
対策: 使用するフォントが指定したOpenTypeの機能（例: liga、smcp）をサポートしているか確認しましょう。サポートされていない機能を適用しようとしても、効果は現れません。Webフォントのプロバイダやフォントの仕様を確認してサポート状況を調べます。
font-variantやtext-renderingプロパティが代替している
font-feature-settingsプロパティでカスタマイズしなくても、font-variantやtext-renderingプロパティで同様の効果を得られる場合があります。これらのプロパティの設定によって、font-feature-settingsの効果が確認しにくくなることがあります。
対策: 代替プロパティが使用されているか確認し、font-variantやtext-renderingを使うか、font-feature-settingsで明示的に指定するかを選択します。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 300px;
background-color: #f9f9f9;
text-align: center;
}
.css-sample-font {
font-size: 24px;
font-family: 'Times New Roman', serif;
}font-feature-settings: ‘liga’ 1
リガチャ（合字）を有効にします。文字が結合されて表示される例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-font css-sample-font-liga">fl, fi, ffの例</p>
</div>CSSコード
.css-sample-font-liga {
font-feature-settings: 'liga' 1;
}表示結果
fl, fi, ffの例
font-feature-settings: ‘smcp’ 1
スモールキャップス機能を有効にします。小文字がスモールキャップスで表示されます。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-font css-sample-font-smcp">Small Capsの例</p>
</div>CSSコード
.css-sample-font-smcp {
font-feature-settings: 'smcp' 1;
}表示結果
Small Capsの例
font-feature-settings: ‘tnum’ 1
固定幅の数字を使用する例です。数字の幅が均一に表示されます。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-font css-sample-font-tnum">0123456789の例</p>
</div>CSSコード
.css-sample-font-tnum {
font-feature-settings: 'tnum' 1;
}表示結果
0123456789の例
font-feature-settings: ‘hist’ 1
歴史的な文字形(古書体)を使用する機能を有効にします。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-font css-sample-font-historical">歴史的な文字形の例</p>
</div>CSSコード
.css-sample-font-historical {
font-feature-settings: 'hist' 1;
}表示結果
歴史的な文字形(古書体)の例
まとめ
- font-feature-settingsプロパティを使用すると、OpenTypeフォントの高度なタイポグラフィ機能を有効にすることができます。
- 代表的な機能には、リガチャ（‘liga’）、スモールキャップス（‘smcp’）、固定幅数字（‘tnum’）、歴史的な文字形（‘hist’）などがあります。
- これらの機能はフォント依存であるため、指定するフォントが機能をサポートしているか確認する必要があります。