font-kerning CSS プロパティはフォントに存在するカーニング情報の使用方法をコントロールします。

/* Keyword values */
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;

カーニング は文字間にどれだけスペースを置くかを制御します。カーニング情報はフォントに含まれており、かつフォントが well-kerned であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。

Example of font-kerning

初期値auto
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

font-kerning プロパティは以下のキーワード内の一つを指定します

auto
このキーワードは、カーニングを使用するかをブラウザに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザは無効化するでしょう。これは既定値です。
normal
このキーワードは、カーニングを適用するよう要求します。
none
このキーワードは、ブラウザがフォントのカーニング情報を使用しないようにします。

形式文法

auto | normal | none

HTML

<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>

CSS

div {
  font-size: 2rem;
  font-family: serif;
}

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}

JavaScript

var input  = document.getElementById('input'),
    kern   = document.getElementById('kern'),
    nokern = document.getElementById('nokern');

input.addEventListener('keyup', function() {
  kern.textContent = input.value; /* Update content */
  nokern.textContent = input.value;
});

kern.textContent = input.value; /* Initialize content */
nokern.textContent = input.value;

仕様

仕様書 策定状況 コメント
CSS Fonts Module Level 3
font-kerning の定義
勧告候補 最初期の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 32[1] 34 (34)[2] 10[3] ? 7
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 34.0 (34)[2] ? ? 7

[1] 接頭辞が必要で -webkit-font-kerning になります。このプロパティを最初にサポートしたバージョンは不明です。

[2] Gecko 24 より、実験的な実装が使用可能でした。これは設定項目 layout.css.font-features.enabled で制御されており、Nightly および Aurora に限り既定値が true です。

[3] OpenType のレイアウト機能は font-feature-settings プロパティでサポートしていますが、個別のプロパティである font-kerning はサポートしていません。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: mkato, yyss
 最終更新者: mkato,