font-size-adjustプロパティは font-familyプロパティで複数指定されたフォントの中で、第一候補以外が採用された場合に見た目の大きさの違いを調整するプロパティです。同じフォントサイズであっても、使用するフォントによって見た目の印象のサイズがバラバラであるため、大きすぎるフォントに対しては小さく、小さすぎるフォントに対しては大きくするといった不具合を解消するためにフォントの見た目の大きさを調整します。
フォントの見た目の大きさの印象はフォントサイズの他に、フォントサイズをフォントサイズの英小文字「x」の高さを示す x-height という値で割った総幅比(aspect value)というものが大きく関係しています。このため、第二候補以下のフォントが選択されても x-height の値を一定に保つように調整することで、見やすさ・読みやすさを維持することができます。ただし、和文フォントは調整対象ではなく、総幅比は大文字と小文字の高さの比率であることから大文字と小文字を持つ "Arial, Times New Roman, Verdana" などの欧文フォントで使われる半角アルファベット・数字が対象であり、漢字・平仮名・カタカナの和文フォント部分は対象外です。
実数値が指定されると選択対象となるフォントごとに以下の公式に従って拡大・縮小率を計算します。
公式: y ( a / a' ) = c
font-sizeプロパティの値font-size-adjustプロパティの値font-sizeプロパティの値フォントサイズが 14px の "Verdana" の代用に "Times New Roman" の縦幅比を調整する例を見てみましょう。
たとえば一般的なVerdanaというフォント、これは縦幅比0.58であり、フォントサイズを100とすればx-heightは58になる。比較対象としてTimes New Romanを挙げると、これは縦幅比0.46である。両者のうち、Verdanaは小さい文字でも読み易さを維持できることが多い。しかし、Times New Romanを用いるべき箇所で同じ大きさのVerdanaを代用品にしようものなら、文字が大きすぎる印象を与えてしまうだろう。
たとえば、14pxのVerdana(縦幅比0.58)を使いたかったのにそれは利用不可能であることが判明し、代わりに縦幅比0.46の代替フォントが利用可能だとしよう。公式より、代替フォントのフォントサイズは14 * (0.58/0.46) = 17.65pxにすればよいことになる。
現状で font-size-adjustプロパティに対応しているのは Netscape や Firefox 等、Gecko系レンダリングエンジン搭載 UA のみです。
body {
font-family : Verdana, 'Times New Roman' ;
font-size : 14px ;
font-size-adjust: .58 ;
}
この例では第一候補のフォントに架空のフォントを指定し、14px の "Verdana" が使えなかった場合を演出し、"Verdana" の代用として "Times New Roman" を公式より導き出した "17.65px" のフォントサイズに調整しています。