font-kerning

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

試してみましょう

font-kerning: auto;

font-kerning: normal;

font-kerning: none;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    “We took Tracy to see ‘THE WATERFALL’ in W. Virginia.”
  </div>
</section>

section {
  font-family: serif;
}

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

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

font-kerning の例

構文

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

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

値

auto

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

normal

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

none

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

公式定義

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

形式定義

font-kerning = 
  auto    |
  normal  |
  none

例

カーニングの有無

HTML

html
<div id="kern"></div>
<div id="no-kern"></div>
<textarea id="input">AV T. ij</textarea>

CSS

css
div {
  font-size: 2rem;
  font-family: "Times New Roman";
}

#no-kern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}

JavaScript

js
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const noKern = document.getElementById("no-kern");

input.addEventListener("keyup", () => {
  kern.textContent = input.value; /* コンテンツを更新 */
  noKern.textContent = input.value;
});

kern.textContent = input.value; /* コンテンツを初期化 */
noKern.textContent = input.value;

仕様書

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

ブラウザーの互換性

関連情報