font-stretch …… フォントの形状を幅広・幅狭にする
広告
font-stretchプロパティは、フォントを幅狭・幅広に表示する際に使用します。
横方向にフォントをつぶしたような幅狭の形状にするには「condensed」が含まれるキーワード、横方向にフォントを伸ばしたような幅広の形状にするには「expanded」が含まれるキーワードを指定します。
「narrower」、「wider」を指定すると1段階幅狭・幅広となります。
font-stretchプロパティは、CSS2.1で一旦削除されましたが、CSS3で標準採用されるかもしれません。
■値
- ultra-condensed
- normalより4段階幅狭、この指定が最も幅狭となる
- extra-condensed
- normalより3段階幅狭
- condensed
- normalより2段階幅狭
- semi-condensed
- normalより1段階幅狭
- normal
- 標準の形状（初期値）
- semi-expanded
- normalより1段階幅広
- expanded
- normalより2段階幅広
- extra-expanded
- normalより3段階幅広
- ultra-expanded
- normalより4段階幅広、この指定が最も幅広となる
- narrower
- 1段階幅狭にする
- wider
- 1段階幅広にする
■使用例
スタイルシート部分は外部ファイル（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プロパティをサポートしたブラウザでは、幅広のフォントになります。
■関連項目
font …… フォントに関する指定をまとめて行う
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする
広告