このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

font-kerning

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

試してみましょう

カーニングは、文字の間隔をどれだけ取るかを定義します。well-kerned フォントでは、この機能は文字間を他と比較してより整った読みやすい間隔にします。

例えば、下の画像では、左の例ではカーニングが使われていませんが、右の例ではカーニングが使われています。

font-kerning の例

構文

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

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

値

auto

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

normal

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

none

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

公式定義

初期値auto
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

形式定義

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

let input  = document.getElementById('input');
let kern   = document.getElementById('kern');
let 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;

仕様書

Specification
CSS Fonts Module Level 4
# font-kerning-prop

ブラウザーの互換性

BCD tables only load in the browser

関連情報