font-size-adjust CSS3

font-size-adjust は、第一候補のフォントではなく代替えのフォントが表示された時に、小文字 x の高さ（x-height）が同じになるように、フォントの大きさを調整します。 font-size を指定していてもフォントの種類によって小文字 x の高さは違います。高さを揃えることによってテキストを読みやすくします。

名前:font-size-adjust
値: none | <number>
初期値:none
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:as specified（指定通り）
アニメーション:number 値として

Value（値）

none
初期値 フォントのx-heightを維持しない
number
フォントの縦横比（フォントサイズに対する小文字xの高さの割合）を実数値で指定する

:: フォントのアスペクト値 :: [ CSS2 仕様書 ]
Verdana 0.58、Comic Sans MS 0.54、Georgia 0.5、Times New Roman 0.46、Trebuchet MS 0.53、Myriad Web 0.48、Minion Web 0.48、 Gill Sans 0.46、Bernhard Moderm 0.4、Caflisch Script Web 0.37、Flemish Script 0.28

Verdana（フォント）のアスペクト値の検証

bb
指定なしfont-size-adjust: 0.58;
bb
指定なしfont-size-adjust: 0.545;

※ 未対応のブラウザでは正しく表示されません。Firefoxは対応しています。

 CSSソース

   span { font-size: 300px; font-family: Verdana; border: solid 1px red; } 
   span.adjust1 { font-size-adjust: 0.58; }
   span.adjust2 { font-size-adjust: 0.545; }

 HTMLソース

   <span>b</span><span class="adjust1">b</span>
   <span>b</span><span class="adjust2">b</span>

Verdana のアスペクト値は 0.58 とCSS2仕様書には書かれていますけど、上記ソースで検証してみますと少し違うようです。 見た目での判断ですが、0.545 が一番ピッタリ合うようです。（ x-height を font-size で割った値を「アスペクト値（aspect value）」と言います。）

font-size-adjust: none;

aspect_image1

font-size-adjust: 0.545; （Verdanaはnone）

aspect_image2

上記のアスペクト値を種類の違うフォントで試してみました。左の画像は何も指定していない状態。右の画像は、第一候補の Verdana のアスペクト値 0.545 を Georgia と Times New Roman に指定しています。 アスペクト値を指定した方は綺麗に揃いましたね。指定するなら、実数値は第一候補のアスペクト値が良さそうです。

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   span.test1 { font-family: Verdana; font-size: 36pt; font-size-adjust: none; }
   span.test2 { font-family: "Times New Roman"; font-size: 36pt; font-size-adjust: 0.545; }
   span.test3 { font-family: Verdana; font-size: 36pt; font-size-adjust: 0.448; }
   span.test4 { font-family: "Times New Roman"; font-size: 36pt; font-size-adjust: none; }
  </style>
 </head>
 <body>
   <p>
   <span class="test1">x-height</span>
   <span class="test4">x-height</span>
   </p>
   <p>
   <span class="test1">x-height</span>
   <span class="test2">x-height</span>
   </p>
   <p>
   <span class="test3">x-height</span>
   <span class="test4">x-height</span>
   </p>
 </body>
</html>

display

どちらも指定なし

x-height x-height

Times New Romanの方にVerdanaのアスペクト値 0.545 を指定

x-height x-height

Verdanaの方にTimes New Romanのアスペクト値 0.448（独自検証結果値） を指定

x-height x-height

※ 未対応のブラウザでは正しく表示されません。Firefoxは対応しています。

上に戻る