TRANS

【解決編】YUI Fonts CSSをモダンブラウザで最適化する。

記事, Web標準

先日、YUI Fonts CSSでフォントサイズを指定した際に、Operaにおいてはフォントが小さく表示されるので、em指定するとか、Operaのみハックするとかして解決する、そんなことを書きました。でも、ようやく各モダンブラウザでYUI Fonts CSSを使いながら、的確なフォントサイズで表示する方法が分かりましたので、書いておきます。パーセンテージの指定を数パーセントずらすことによって、モダンブラウザでほぼ同じフォントサイズを表示できるようです。

まず、前回書いた記事で問題だと考えていたのは、

1. em指定の場合は、IE6などのブラウザで解釈が異なる（ブラウザの文字サイズの拡大機能を使った際に、拡大される割合がかなり違う）ということ。祖先要素にパーセント指定するという解決策はあるものの、階層が深くなってしまうと、あまり現実的ではない。
2. Operaのみに対応するハックのコードを埋め込んでおき、em指定するという方法もあるが、できる限りはハックしたくない。

という2点です。（このあたりはコメント欄も含めて、Yahoo! UI Library: Fonts CSSを使うのなら、Operaには気を付けて！を参考にして下さい。）

要は、できればパーセント指定をしたいし、ハックもしたくない。でも、YUI Fonts CSSは使いたい、そんな気持ちなわけです。先に結果から。以下のサンプルページをFirefox2、Opera9、IE7で順に見てください。

「YUI Fonts CSSだって、まだ完璧ではないんだから」サンプル。

でも、わざわざ各ブラウザで表示するのは面倒だと思う人が大半だと思いますので、各ブラウザのスクリーンショットを掲載します。

Firefox2で表示

Opera9で表示

IE7で表示

このサンプルコードは、

	<div class="section01">
	<h2>font-sizeを93%で指定した場合。</h2>
	<p>これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。</p>
	</div>
	
	<div class="section02">
	<h2>font-sizeを92%で指定した場合。</h2>
	<p>これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。</p>
	</div>
	
	<div class="section03">
	<h2>font-sizeを152%で指定した場合。400pxで指定。</h2>
	</div>
	
	<div class="section04">
	<h2>font-sizeを154%で指定した場合。400pxで指定。</h2>
	</div>

というようなhtmlと、

div.section01 p {
	font-size: 93%;
}

div.section02 p {
	font-size: 92%;
}

div.section03 h2 {
	width: 400px;
	border: 1px solid #CCCCCC;
	font-size: 152%;
}

div.section04 h2 {
	width: 400px;
	border: 1px solid #CCCCCC;
	font-size: 154%;
}

のようなCSS。その上で、link要素でYUI Fonts CSSとReset CSSを読み込ませています。

YUI Fonts CSSを使う際には、どんなパーセントでどれくらいのフォントサイズ（px単位）になるのかという一覧表があります。それによると、12px相当のフォントサイズを得るためには、92%のフォントサイズを指定するする必要がある、とのこと。それをやると、Operaではフォントサイズが小さくなってしまうという問題があります。（上のスクリーンショットでは2つ目の例のもの）

しかし、一覧表のフォントサイズをベースに考えるのではなく、1%だけ大きく表指定してやる、つまり93%で指定すると、firefox、opera、ie共に同じフォントサイズで表示されるようになります。（上のスクリーンショットでは1つ目の例のもの）これが解決策なわけです。em指定もハックする必要もありません。

また、スクリーンショットの下2つのサンプルについても説明しておきます。YUIによると、20px相当のフォントサイズを得るためには、152%のフォントサイズを指定するはずなのですが、152%で指定すると、これもまたOperaのみフォントサイズが小さく表示されます。（firefox、ie共に2行で表示されるのですが、Operaは1行で表示）これも、パーセントをずらして、154%で指定すると、今度はfirefox、operaは同じフォントサイズなのですが、ieのみ2文字ほど余分に出てきてしまいます。

結局、どういうこと？

つまりは、YUI Fonts CSSが全てのモダンブラウザのレンダリングの差異を完全には吸収しきれていない、ということだと思います。そのため、パーセントで指定しても、全てのモダンブラウザにて全く同一のフォントサイズを指定できるわけではない、ということ。

そのための解決策として、ブラウザごとに表示の差異が出てしまい、それもデザインに大きな影響を与えるようであれば、YUIの一覧表で掲載されているパーセントから数パーセントを足りしたり、引いたりして、ブラウザごとの差異をできる限り少なくする、そんな作業が必要になろうかと思います。

かといって、これは別にYUIを使ってはならない、ということでは決してなく、これだけ便利なライブラリなのだから、積極的に使ってよいと思います。ただ、使う際のブラウザの表示の差異もあり得るということなので、使う際は各ブラウザで表示チェックをするのはやはり必要だということです。

Permalink | コメント(4) | トラックバック(0)