このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2020年1月.
font-kerning はCSS のプロパティで、フォントに存在するカーニング情報の使用を制御します。
試してみましょう
font-kerning: auto;font-kerning: normal;font-kerning: none;<section> <div> “We took Tracy to see ‘THE WATERFALL’ in W. Virginia.” </div></section>section { font-family: serif;}「カーニング」は、文字同士の間隔に作用します。適切にカーニングされたフォントでは、この機能により特定の文字組み合わせ間の空白が縮小され、文字間隔がより均一で読みやすいものになります。
例えば、下の画像では、左の例ではカーニングが使われていませんが、右の例ではカーニングが使われています。
構文
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 |
|---|---|
| 適用対象 | すべての要素とテキスト。::first-letterおよび::first-line にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式定義
font-kerning =
auto|
normal|
none
例
カーニングの有無
HTML
html
<div></div><div></div><textarea>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 |