トップページ > スタイルシートリファレンス > font-stretch

★スタイルシートリファレンス

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 …… フォントを縦長・横長にする
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ