【font-size-adjust】フォントのサイズの違いを調整

font-size-adjustプロパティでは、font-familyプロパティで指定した第1候補以外が表示された場合の、各フォントのサイズ(大きさ)の違いを調整することができます。

例えば、ユーザーの環境では指定した第1候補のフォントが利用できず、第2候補、第3候補が表示された場合、フォントの種類によっては外観がさまざまなため、サイズが同じでもテキストが読みづらくなる事があります。 こういった場合、あらかじめ第1候補のフォントの縦横比を指定しておくことで、第2候補以降のフォントが使用された場合でも小文字xの高さ(x-height)を一定に保つよう調整することができます。

こうすることで第1候補のフォントと同様のサイズとなるので、テキストの読みやすさを保つことができます。

またフォントの読みやすさはfont-sizeとx-heightに左右されます。 そしてこの二つを使って算出する縦横比(font-sizeに対しての小文字xの高さの割合)が高ければテキストは読みやすく、低ければ読みづらくなります。

※小文字の高さ(そのフォントの文字xの高さ)

font-size-adjustプロパティの値には、第1候補のフォントの縦横比を実数値で指定して下さい。 なおfont-size-adjustはcss2.1では削除されましたが、css3で再び定義されました。

書式

  • font-size-adjust : ……… フォントサイズを調整する

★:none、実数値、inherit

実数値
第1候補のフォントの縦横比(小文字xの高さ÷フォントの高さ)を実数値で指定。例えば、「0.46」「0.48」「0.50」など。
none
フォントサイズを調整しない

使用した時の例

.sample1 {
  font-family:"Times New Roman";
  font-size:16px;
  font-size-adjust:0.46;
}
.sample2 {
  font-family:"Times New Roman";
  font-size:16px;
}
<div class="sample1">Times New Roman</div>
<div class="sample2">Times New Roman(font-size-adjustなし)</div>

ブラウザ上の表示例

Times New Roman
Times New Roman(font-size-adjustなし)

対応ブラウザなどのデータ

初期値 none 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / font
対応ブラウザ Firefox3~