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

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

font-size-adjustプロパティを利用する

 font-size-adjustプロパティでは、第1候補のフォントがどのような比率(Aspect value)でデザインされているかを指定する。これにより、ユーザーの環境で第1候補以外のフォントが使用された場合、ブラウザがフォントサイズを調節して、第1候補のフォントを使用したときと見た目の大きさを揃えて表示する。

 たとえば、「Verdana」のAspect valueは「0.58」となっているので、フォントの第1候補が「Verdana」の場合、「font-size-adjust:0.58」と指定する。すると、「Verdana」がインストールされていない環境では「Times New Roman」で表示されるが、Aspect valueを元にフォントサイズが調節され、「Verdana」で表示したときと見た目が同じバランスで表示される。

サンプル2

Verdanaがインストールされた環境(上)と、インストールされていない環境(下)
div{
font-size: 16px;
font-family: Verdana, 'Times New Roman';
font-size-adjust: 0.58
}
ブラウザで表示を確認する

 なお、「Verdana」はWindowsやMac OS X環境に標準でインストールされたフォントなので、「Verdana」がインストールされていない環境はほとんどないだろう。そこで、font-size-adjustプロパティが機能しているかどうかをテストするためのソースを用意した。

 上の文章は「Verdana」で、下の文章は「Times New Roman」で表示されるが、font-size-adjustプロパティに対応していれば下の文章が上の文章と同じバランスで表示される。

font-size-adjustプロパティに対応したブラウザ(Firefox)の表示 font-size-adjustプロパティに対応したブラウザ(Firefox)の表示
font-size-adjustプロパティに対応していないブラウザの表示 font-size-adjustプロパティに対応していないブラウザの表示

サンプル3

div#text01{
font-size: 16px;
font-family: Verdana, 'Times New Roman';
font-size-adjust: 0.58
}

div#text02{
font-size: 16px;
font-family: Dummy, 'Times New Roman';
font-size-adjust: 0.58
}
ブラウザで表示を確認する

 このサンプルでは、上の文章では第1候補のフォントを「Verdana」と指定しているが、下の文章ではダミーのフォント名を指定している。これにより、下の文章は「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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]