CSS - font-kerning

トップ > CSSリファレンス > font-kerning

概要

属性名 font-kerning
auto | [ none || normal ]
初期値auto
適用可能要素すべての要素
継承継承する
メディアVisual
サポートC3 / e10 / Fx34 / Ch32 / Sa7

説明

プロポーショナルフォントの文字間隔を、隣り合う文字の組み合わせによって文字詰めすることを「カーニング」と呼びます。

カーニング有り
AVAVAVAV
YaYuYoYaYuYo
カーニング無し
AVAVAVAV
YaYuYoYaYuYo

※ カーニングをサポートしているブラウザで参照してください。

font-kerning は、メトリクスカーニングと呼ばれる方法で、カーニングを制御します。メトリクスカーニングでは、Times New Roman や Times などのフォント自体が持つ、この文字とこの文字を並べる際にはこのくらい字詰めするといった「カーニングペア」と呼ばれる情報に従って字詰めします。

説明
autoカーニングの制御をブラウザの判断にゆだねます。
noneカーニングしません。
normalメトリクスカーニングの手法でカーニングします。

使用例

CSS
.kern-auto, .kern-none, .kern-normal {
  font-size: 22pt;
  font-family: "Times New Roman", "Times";
  font-weight: bold;
}
.kern-auto {
  font-kerning: auto;
}
.kern-none {
  font-kerning: none;
}
.kern-normal {
  font-kerning: normal;
}
HTML
<div class="kern-none">To Tr Ta We Wo Ya Yo AV - none</div>
<div class="kern-auto">To Tr Ta We Wo Ya Yo AV - auto</div>
<div class="kern-normal">To Tr Ta We Wo Ya Yo AV - normal</div>
表示
To Tr Ta We Wo Ya Yo AV - none
To Tr Ta We Wo Ya Yo AV - auto
To Tr Ta We Wo Ya Yo AV - normal

リンク


Copyright (C) 2015 杜甫々
初版:2015年11月15日、最終更新:2015年11月15日
http://www.tohoho-web.com/css/prop/font-kerning.htm