font-kerning

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 であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。

構文

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;

仕様

ブラウザ実装状況

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

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

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

関連情報

• 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