フォントの種類でレイアウトを崩さないために：font-size-adjustプロパティ

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

主要なフォントのAspect value

　主要なフォントのAspect valueはCSSの標準規格で紹介されている。ちなみに、font-size-adjustはCSS 2で定義されたプロパティだが、CSS 2.1では削除され、CSS 3のFontsで復活している。

　CSS 2とCSS 3で紹介されているAspect valueは以下のようになっている。

　Aspect valueはフォントサイズに対するx-heightの割合で算出する。x-heightは小文字xの高さだ。たとえば、100ピクセルのフォントサイズで表示したときの小文字xの高さが58ピクセルであれば、そのフォントのAspect valueは0.58となる。

font-size-adjustプロパティを指定したときの処理

　font-size-adjustプロパティを指定した場合、ブラウザは次の式で表示に使用するフォントサイズを算出する。

y(a/b) = c

• y = font-sizeプロパティで指定したフォントサイズ
• a = 第1候補のフォントのAspect value
• b = 表示に使用するフォントのAspect value
• c = 表示に使用するフォントサイズ

　サンプル2のように、フォントサイズを16ピクセル、第1候補のフォントを「Verdana」と指定した場合、

y = 16
a = 0.58

　となる。このとき、表示に使用するフォントが第2候補の「Times New Roman」であれば、b = 0.46 となるので、

16 * (0.58/0.46) = 20.1739...

　となり、表示に使用するフォントサイズは約20ピクセルと算出できる。約20ピクセルの「Times New Roman」で文章を表示すれば、16ピクセルの「Verdana」で表示した文章と見た目のバランスを揃えることができるというわけだ。