font-kerning

概要

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

構文

font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/* グローバル値 */
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;

値

auto

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

normal

このキーワードは、カーニングを適用するよう要求します。

none

このキーワードは、ブラウザがフォントのカーニング情報を使用しないようにします。

形式文法

auto | normal | none

例

p {
  font-kerning: none;
}

仕様

ブラウザ実装状況

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

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

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

カーニングのデモ

HTML コンテンツ

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

CSS コンテンツ

#nokern, #kern {
  font-size: 2rem;
  font-family: serif;
}
#nokern {
  font-kerning: none;
}
#kern {
  font-kerning: normal;
}

JS コンテンツ

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;

関連情報

• font-variant, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-ligatures, font-variant-numeric, font-variant-alternates, font-synthesis, letter-spacing