--- title: font-kerning slug: Web/CSS/font-kerning tags: - CSS - CSS フォント - CSS プロパティ - Reference translation_of: Web/CSS/font-kerning ---
{{CSSRef}}

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

/* キーワード値 */
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

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

カーニングは、文字間にどれだけ間隔を置くかを制御します。カーニング情報はフォントに含まれており、かつフォントが well-kerned であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。

Example of font-kerning

{{cssinfo}}

構文

font-kerning プロパティは以下のキーワード内の一つを指定します。

値

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

形式文法

{{csssyntax}}

例

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;

{{ EmbedLiveSample('Example') }}

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}} {{Spec2('CSS3 Fonts')}} 初回定義

ブラウザーの対応

{{Compat("css.properties.font-kerning")}}

関連情報