font-stretch CSS3

font-stretch は、フォントを幅狭、幅広に表示する時に使います。指定した字幅に対するフォントが存在しない場合は、違う字幅で表示されます。

名前	:	font-stretch
値	:	normal \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded
初期値	:	normal
適用対象	:	全ての要素
継承	:	する
パーセンテージ	:	n/a
メディア	:	visual（視覚的）
計算値	:	as specified（指定通り）
アニメーション	:	font-stretch 値として

Value（値）

ultra-condensed: 最も幅が狭い
extra-condensed: normalよりかなり幅が狭い
condensed: normalより幅が狭い
semi-condensed: normalより少し幅が狭い
normal: 初期値標準
semi-expanded: normalより少し幅が広い
expanded: normalより幅が広い
extra-expanded: normalよりかなり幅が広い
ultra-expanded: 最も幅が広い

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p { font-family: Arial, sans-serif; font-size: 40pt; }
   p.test1 { font-stretch: ultra-condensed; }
   p.test2 { font-stretch: extra-condensed; }
   p.test3 { font-stretch: condensed; }
   p.test4 { font-stretch: semi-condensed; }
   p.test5 { font-stretch: normal; }
   p.test6 { font-stretch: semi-expanded; }
   p.test7 { font-stretch: expanded; }
   p.test8 { font-stretch: extra-expanded; }
   p.test9 { font-stretch: ultra-expanded; }
  </style>
 </head>
 <body>
   <p class="test1">font-stretch</p>
   <p class="test2">font-stretch</p>
   <p class="test3">font-stretch</p>
   <p class="test4">font-stretch</p>
   <p class="test5">font-stretch</p>
   <p class="test6">font-stretch</p>
   <p class="test7">font-stretch</p>
   <p class="test8">font-stretch</p>
   <p class="test9">font-stretch</p>
 </body>
</html>

display

font-stretch

※ 未対応のブラウザでは正しく表示されません。