font-kerning：フォントの文字詰め（カーニング）を制御する
| 初期値 | auto |
| 適用対象 | 全ての要素、::first-letterおよび::first-line |
| 継承 | する |
| アニメーション | 離散値 |
| 対応ブラウザ | caniuseで確認 |
font-kerningプロパティの説明
font-kerningは、フォントの文字詰め（カーニング）を制御します。カーニングとは、欧文の組版で発達した技法で、文字同士の間隔をどれだけ取るのかを表す言葉です。ある一定の規則に従って文字を配列することによって、視認性や可読性を高める効果があります。
半角スペースで区切られた単語同士の間隔は、word-spacingで調整します。連続する文字同士の間隔は、letter-spacingで調整します。
font-kerningに指定できる値
- auto
- カーニングするかどうかをブラウザの判断に任せます。多くの場合、指定されたフォントの既定値に依存します。これが初期値です。
- normal
- カーニングを適用するように要求します。フォントがカーニングに対応していれば有効であり、対応していなければ無効となります。
- none
- カーニングを使用しないように要求します。ブラウザはフォントにカーニング情報があっても適用しません。
font-kerningの使い方とサンプル
font-kerningプロパティの構文は以下の通りです。
CSS
/* キーワード値 */
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* グローバル値 */
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: unset;
font-kerningの実例
それでは実際にfont-kerningプロパティの書き方を見ていきましょう。以下の例は、欧文フォントのカーニングを有効にした場合と、そうでない場合の比較です。主にペアカーニングの対象となっているアルファベットの組み合わせを確認します。
表示確認
CSS
.samp_box {
overflow: auto;
width: 100%;
margin-top: 1rem;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
font-size: 1.6rem;
}
#ff_serif {
font-family: "Times New Roman", serif;
}
.fk_on {
font-kerning: normal;
}
.fk_off {
font-kerning: none;
}
HTML
<section class="samp_box" id="ff_serif">
<h2>font-kerning: normal;</h2>
<p class="fk_on">ABCDEFG. LAToTrTaTuTeTyWaWAWeWoYaYoyo.</p>
<h2>font-kerning: none;</h2>
<p class="fk_off">ABCDEFG. LAToTrTaTuTeTyWaWAWeWoYaYoyo.</p>
</section>