font-stretchプロパティは、フォントの形状を幅広・幅狭にする際に使用します。
指定できる絶対キーワード値には、ultra-condensed（超幅狭）～ultra-expanded（超幅広）まで９つのキーワードがあります。
これらのキーワードを指定すると、フォントファミリーのバリエーションから対応する外観が選択されます。
ただし、フォントによっては９種類もの幅のバリエーションが用意されておらず、指定したキーワードに対応する外観が存在しないこともあります。
この場合には他の幅に置き換えられます。
widerやnarrowerは、親要素に対して相対的に幅を広く、または、狭くします。
widerやnarrowerが指定された要素の子要素には、widerやnarrowerのキーワードが継承されるのではなく、widerやnarrowerによって算出された絶対キーワード値が継承されます。
尚、widerとnarrowerは、CSS3の勧告までに仕様から削除されるかもしれません。
■値
- ultra-condensed
- 超幅狭
- extra-condensed
- さらに幅狭
- condensed
- 幅狭
- semi-condensed
- やや幅狭
- normal
- 標準の幅（初期値）
- semi-expanded
- やや幅広
- expanded
- 幅広
- extra-expanded
- さらに幅広
- ultra-expanded
- 超幅広
- wider
- 親要素に対して相対的に幅広にする
- narrower
- 親要素に対して相対的に幅狭にする
- inherit
- 継承する
■初期値・適用対象・値の継承
- 初期値
- normal
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
CSSソースは外部ファイル（sample.css）に記述
p.sample1 {font-stretch:condensed;}
p.sample2 {font-stretch:expanded;}
HTMLソース
<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プロパティをサポートしたブラウザでは、幅広のフォントになります。