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

エ・ビスコム・テック・ラボ
2008-08-27 18:41:01
  • このエントリーをはてなブックマークに追加

主要なフォントのAspect value

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

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

フォントのAspect value
フォントの種類Aspect value
Verdana0.58
Comic Sans MS0.54
Trebuchet MS0.53
Georgia0.5
Myriad Web0.48
Minion Web0.47
Times New Roman0.46
Gill Sans0.46
Bernhard Modern0.4
Caflisch Script Web0.37
Flemish Script0.28

 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」で表示した文章と見た目のバランスを揃えることができるというわけだ。

  • コメント(1件)
#1 jdaggett   2008-08-28 14:18:49
Aspect valueの計算がフォントデータによるので下記のExample Vを利用すれば簡単に計算できると思います:

http://dev.w3.org/csswg/css3-fonts/#relative
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]