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 プロパティはフォントに存在するカーニング情報の使用を制御します。
試してみましょう
カーニングは、文字の間隔をどれだけ取るかを定義します。well-kerned フォントでは、この機能は文字間を他と比較してより整った読みやすい間隔にします。
例えば、下の画像では、左の例ではカーニングが使われていませんが、右の例ではカーニングが使われています。
構文
css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* グローバル値 */
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: unset;
値
公式定義
初期値 | auto |
---|---|
適用対象 | すべての要素とテキスト。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式定義
例
カーニングの有無
HTML
html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
CSS
css
div {
font-size: 2rem;
font-family: serif;
}
#nokern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
JavaScript
js
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