font-size-adjust

Updated 2013.10.27 / Published 2007.02.02

font-size-adjustプロパティは font-familyプロパティで複数指定されたフォントの中で、第一候補以外が採用された場合に見た目の大きさの違いを調整するプロパティです。同じフォントサイズであっても、使用するフォントによって見た目の印象のサイズがバラバラであるため、大きすぎるフォントに対しては小さく、小さすぎるフォントに対しては大きくするといった不具合を解消するためにフォントの見た目の大きさを調整します。

font-size-adjustプロパティはCSS2で定義されましたが、CSS2.1仕様では一旦削除され、CSS3仕様で新たに定義されています。

値

初期値

none

適用対象

すべての要素

継承

する

メディア

visual

フォントの見た目の大きさの印象はフォントサイズの他に、フォントサイズをフォントサイズの英小文字「x」の高さを示す x-height という値で割った総幅比（aspect value）というものが大きく関係しています。このため、第二候補以下のフォントが選択されても x-height の値を一定に保つように調整することで、見やすさ・読みやすさを維持することができます。ただし、和文フォントは調整対象ではなく、総幅比は大文字と小文字の高さの比率であることから大文字と小文字を持つ "Arial, Times New Roman, Verdana" などの欧文フォントで使われる半角アルファベット・数字が対象であり、漢字・平仮名・カタカナの和文フォント部分は対象外です。

font-size-adjustプロパティの値

<実数値>: 第一候補のフォントの縦幅比を実数値（ひとつの小数点を含めてよい10進数値）で指定する
none: フォントの x-height を維持しない（つまり、大きさは各フォントの x-height に依存）

実数値が指定されると選択対象となるフォントごとに以下の公式に従って拡大・縮小率を計算します。

公式： y ( a / a' ) = c

y = 当該要素の font-sizeプロパティの値
a = font-size-adjustプロパティの値
a' = 現在選択中のフォントの縦幅比
c = 現在選択中のフォントの小文字に適用すべき font-sizeプロパティの値

フォントサイズが 14px の "Verdana" の代用に "Times New Roman" の縦幅比を調整する例を見てみましょう。

CSS2勧告邦訳 15.2.4より: たとえば一般的な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-familyのアスペクト比（文字 x の高さであるx-heightとフォントサイズの比率）にするべきです。こうすれば、最初に選んだフォントが利用可能なら、UAがfont-size-adjustプロパティをサポートしているかどうかに関わらず、どのUAでも同じサイズで表示されます。

font-size-adjustプロパティの実装状況

IE: 未サポート
Firefox: ◯（Firefox1+）
Opera: 未サポート
Chrome: 未サポート
Safari: 未サポート
iOS: 未サポート
Android: 未サポート

現状で font-size-adjustプロパティに対応しているのはGecko系レンダリングエンジンを搭載しているFirefoxのみです。同じGecko系の派生ブラウザであってNetscapeも対応していました。

サンプル

body {
font-family : Verdana, 'Times New Roman' ;
font-size : 14px ;
font-size-adjust: .58 ;
}

この例では第一候補のフォントに架空のフォントを指定し、14px の "Verdana" が使えなかった場合を演出し、"Verdana" の代用として "Times New Roman" を公式より導き出した "17.65px" のフォントサイズに調整しています。