Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

font-kerning

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

カーニング文字間隔

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-kerning
33
79
32
9
33
9
auto
33
79
32
9
33
9
none
33
79
32
9
33
9
normal
33
79
32
9
33
9
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (33)
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (29)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (6)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (33)
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (29)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (6)

基本構文

CSS 
h1, h2 {
  font-kerning: normal;
}
.monospaced {
  font-kerning: none;
}

ライブデモ

Normal(enabled)

CSS Normal(enabled) demo.

プレビュー全画面表示

None(disabled)

CSS None(disabled) demo.

プレビュー全画面表示

Comparison

CSS comparison demo.

プレビュー全画面表示

実務での使いどころ

  • 見出しのタイポグラフィ最適化

    大きなフォントサイズの見出しでカーニングを有効にし、AV、WAなどの文字ペアの間隔を美しく調整します。

注意点

  • カーニングの適用はパフォーマンスに影響する場合があるため、大量のテキストノードでの使用は慎重に検討してください。

アクセシビリティ

  • カーニングは視覚的な美しさのためのものであり、スクリーンリーダーには影響しません。letter-spacingとの併用で読みやすさを調整できます。

参考リンク