Firefox 9で追加された font-stretch を試してみた

Mozillaのサイトではこの様な例が書かれていたのですが色々と試してみても設定が反映されていない様でした。もしかしたらこの設定に対応したフォントが必要なのかも？と思ったのですが自分が試した範囲では対応するフォントは見つかりませんでした。

h1 { font-stretch: extra-expanded }
p  { font-stretch: condensed }

font-stretch - MDN
https://developer.mozilla.org/en/CSS/font-stretch

Bugzillaでこの項目についてチェックした所でやっと反映させる方法が分かりました。

主な部分だけ書き出すと以下の様になります。Web Fontを使用して @font-face の設定にてどのフォントがどの font-stretch に対応するかを指定するみたいです。

@font-face {
  font-family: test1;
  src: url(./fonts/mplus/mplus-1p-heavy.ttf);
  font-stretch: ultra-expanded;
}
@font-face {
  font-family: test1;
  src: url(./fonts/mplus/mplus-1p-thin.ttf);
  font-stretch: ultra-condensed;
}
#test_ultra-expanded1 {
	font-family: test1;
	font-stretch: ultra-expanded;
}
#test_ultra-condensed1 {
	font-family: test1;
	font-stretch: ultra-condensed;
}
<div id='test_ultra-expanded1'>eeeee - [ultra-condensed(最小の幅)]</div>
<div id='test_ultra-condensed1'>eeeee - [extra-condensed(最大の幅)]</div>

しかし、これは @font-face にて値を固定で指定している為、幅が広いフォントにも関わらず、 ultra-expanded を指定するなど、実際と異なる指定をした場合にもそのフォントが選択されてしまう様です。

なお、IE9も font-stretch に対応済みみたいです。

Chromeはまだ未対応なので @font-face にて最後に指定したフォントが選択される様です。

実際に試した場合はこちらにアクセスして下さい。
※フォントをダウンロードするため多少、反映されるまでに時間がかかります。
※フォントはM+ OUTLINE FONTSを使わせて頂きました。