font-kerning
CSS プロパティはフォントに存在するカーニング情報の使用方法を制御します。
/* キーワード値 */ font-kerning: auto; font-kerning: normal; font-kerning: none; /* グローバル値 */ font-kerning: inherit; font-kerning: initial; font-kerning: unset;
カーニングは、文字間にどれだけ間隔を置くかを制御します。カーニング情報はフォントに含まれており、かつフォントが well-kerned であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。
初期値 | auto |
---|---|
適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
継承 | あり |
メディア | 視覚 |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
font-kerning
プロパティは以下のキーワード内の一つを指定します。
値
auto
- このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。
normal
- このキーワードは、カーニングを適用するよう要求します。
none
- このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。
形式文法
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
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;
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Fonts Module Level 3 font-kerning の定義 |
勧告候補 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome
完全対応
32
| Edge 未対応 なし | Firefox
完全対応
32
| IE 未対応 なし | Opera ? | Safari 完全対応 7 | WebView Android ? | Chrome Android ? | Edge Mobile 未対応 なし | Firefox Android
完全対応
32
| Opera Android ? | Safari iOS 完全対応 7 | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。