CSS辞典 font-kerningプロパティの解説
カーニング情報の使用方法を制御する「font-kerningプロパティ」の使用方法を掲載
CSS3/2.1
対応ブラウザ
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome](https://kcfran.com/wp-content/uploads/2022/05/crome_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox](https://kcfran.com/wp-content/uploads/2022/05/firefox_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari](https://kcfran.com/wp-content/uploads/2022/05/safari_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge](https://kcfran.com/wp-content/uploads/2022/05/msedge_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie](https://kcfran.com/wp-content/uploads/2022/05/msie_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera](https://kcfran.com/wp-content/uploads/2022/05/opera_icon.png)
初期値 | auto |
適用される要素 | すべての要素 |
モジュール | CSS Fonts Module Level3及びLevel4 |
継承 | あり |
概要・使用方法
{font-kerning: 表示方法;}
font-kerningプロパティは、フォントに含まれるカーニング情報をブラウザで使用するか設定します。カーニングとは、特定の文字の組み合わせの文字間隔を調整して読みやすい表示にすることです。
![カーニング情報あり・なしの解説図](https://kcfran.com/wp-content/uploads/2022/06/image-262.png)
カーニングありの場合は、wとaのスペースを調整します。調整が無い場合は、ちょっと広がった感じになります。
表示方法
auto | カーニング情報を使用するかはブラウザに任せます。 |
normal | カーニング情報を使用するようにブラウザに要求します。 |
none | カーニング情報を使用しないようにブラウザに要求します。 |
サンプルコード
ふぁ<!DOCTYPE html>
<html lang="ja">
<head>
<title>font-kerning CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
/* フォントを個別指定 */
p{font-family: serif;}
p.none{
font-kerning: none;
font-size:200%;
}
p.auto{
font-kerning: auto;
font-size:200%;
}
p.normal{
font-kerning: normal;
font-size:200%;
}
</style>
</head>
<body>
<p class="none">Watermark</p>
<p class="auto">Watermark</p>
<p class="normal">Watermark</p>
</body>
</html>
実行結果
Watermark
Watermark
Watermark
chromeブラウザ実行結果
![chrome](https://kcfran.com/wp-content/uploads/2022/06/image-263.png)
Firefox ブラウザ実行結果
![Firefox](https://kcfran.com/wp-content/uploads/2022/06/image-264.png)
edgeブラウザ実行結果
![edge](https://kcfran.com/wp-content/uploads/2022/06/image-265.png)
operaブラウザ実行結果
![opera](https://kcfran.com/wp-content/uploads/2022/06/image-266.png)