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段階幅広にする
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プロパティをサポートしたブラウザでは、幅広のフォントになります。
広告