font-stretchプロパティは、フォントの形状を幅広・幅狭にする際に使用します。
指定できる絶対キーワード値には、ultra-condensed（超幅狭）～ultra-expanded（超幅広）まで９つのキーワードがあります。
これらのキーワードを指定すると、フォントファミリーのバリエーションから対応する外観が選択されます。
ただし、フォントによっては９種類もの幅のバリエーションが用意されておらず、指定したキーワードに対応する外観が存在しないこともあります。
この場合には他の幅に置き換えられます。
widerやnarrowerは、親要素に対して相対的に幅を広く、または、狭くします。
widerやnarrowerが指定された要素の子要素には、widerやnarrowerのキーワードが継承されるのではなく、widerやnarrowerによって算出された絶対キーワード値が継承されます。
尚、widerとnarrowerは、CSS3の勧告までに仕様から削除されるかもしれません。
p.sample1 {font-stretch:condensed;}
p.sample2 {font-stretch:expanded;}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>font-stretchプロパティをサポートしたブラウザでは、幅狭のフォントになります。</p>
<p class=”sample2″>font-stretchプロパティをサポートしたブラウザでは、幅広のフォントになります。</p>
</body>
</html>
font-stretchプロパティをサポートしたブラウザでは、幅狭のフォントになります。
font-stretchプロパティをサポートしたブラウザでは、幅広のフォントになります。
