MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

font-kerning

概要

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

Example of font-kerning

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

構文

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;
}

仕様

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

ブラウザ実装状況

機能 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 はサポートしていません。

カーニングのデモ

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;

関連情報

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

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