font-kerningプロパティは、文字間のカーニング（字詰め）を制御するためのCSSプロパティです。カーニングとは、特定の文字ペアの間隔を調整することで、より美しいタイポグラフィを実現する技術です。
font-kerningの値とその効果の一覧
- normal: カーニングがサポートされている場合に、カーニングを有効にします。
- none: カーニングを無効にします。文字間の調整が行われません。
- auto: ブラウザやフォントのデフォルト設定に従ってカーニングを適用します。
注意点と関連情報
カーニングはフォントによって異なるため、指定したフォントがカーニングをサポートしている必要があります。また、ブラウザによってカーニングの適用が異なる場合があります。
font-kerningプロパティが効かない時の原因と対策
フォントがカーニングをサポートしていない
font-kerningプロパティは、フォント自体がカーニング（文字間のスペース調整）をサポートしていない場合、効果が適用されません。すべてのフォントがカーニング情報を持っているわけではなく、対応していないフォントではカーニングが機能しません。
対策: 使用しているフォントがカーニングをサポートしているか確認しましょう。OpenTypeフォントやプロフェッショナルなフォントではカーニングがサポートされていることが多いです。
font-feature-settingsとの競合
font-kerningは、OpenType機能をカスタマイズするfont-feature-settingsプロパティと連携して動作しますが、font-feature-settingsで明示的にカーニングの無効化が指定されている場合、font-kerningが適用されないことがあります。
対策: font-feature-settingsプロパティでカーニング機能が上書きされていないか確認し、必要に応じて調整します。たとえば、font-feature-settings: "kern" on;を使用してカーニングを有効にすることができます。
カーニングが視覚的に確認できない
font-kerningプロパティは、文字間のスペースを微調整するため、効果が非常に小さいことがあります。特定のフォントや文字列では、カーニングの有効・無効による視覚的な違いがわかりにくい場合があります。
対策: カーニング効果を確認するために、文字間スペースが影響しやすい文字ペア（例: “AV”や”To”など）を使用して効果を確認します。フォントや文字列によってカーニングの効果が異なることを理解しておくとよいでしょう。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 300px;
background-color: #f9f9f9;
text-align: center;
}
.css-sample-text {
font-family: 'Times New Roman', serif;
font-size: 24px;
}font-kerning: normal
この設定では、フォントがサポートするカーニングが適用されます。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-kerning-normal">AVの例</p>
</div>CSSコード
.css-sample-kerning-normal {
font-kerning: normal;
}表示結果
AVの例
font-kerning: none
カーニングが無効になります。文字間の調整が行われず、間隔が一定になります。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-kerning-none">AVの例</p>
</div>CSSコード
.css-sample-kerning-none {
font-kerning: none;
}表示結果
AVの例
font-kerning: auto
ブラウザやフォントのデフォルト設定に従って、カーニングが適用されます。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-kerning-auto">AVの例</p>
</div>CSSコード
.css-sample-kerning-auto {
font-kerning: auto;
}表示結果
AVの例
まとめ
- font-kerningプロパティは、カーニング（字詰め）を制御し、文字の間隔を調整します。
- フォントがカーニングをサポートしている必要があります。
- 値にはnormal（カーニングを有効にする）、none（カーニングを無効にする）、auto（デフォルト設定に従う）があります。
- ブラウザによってカーニングの適用が異なる場合があるため、複数のブラウザでテストすることをお勧めします。