4.1 プロパティ font-style
CSSにはWebページ上のフォントやその表示を管理するためのたくさんのプロパティがあるよ。プロパティ
font-style, font-variantとfont-stretchはテキストのスタイル、表示、幅をカスタマイズするのに役立つんだ。それぞれのプロパティをもう少し詳しく見てみよう。
プロパティfont-styleはテキストのスタイルを決めるよ。これを使って斜体（イタリック）や通常のテキストスタイルを設定できるんだ。
値:
normal: 通常のテキストスタイル（デフォルト）italic: 斜体テキスト（イタリック）oblique: 斜体テキスト。イタリックに似ているけど、傾き方が違うよ。
使用例:
CSS
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
HTML
<body>
<p class="normal">これは通常のテキストです。</p>
<p class="italic">これは斜体テキストです（イタリック）。</p>
<p class="oblique">これは斜体テキストです（oblique）。</p>
</body>
4.2 プロパティ font-variant
プロパティfont-variantはテキストをスモールキャップスで表示するのを管理するよ。これを使うと、全ての文字を大文字にして、小文字の文字には小さいサイズを割り当てられるんだ。
値:
normal: 通常のテキスト（デフォルト）small-caps: スモールキャップスのテキスト
使用例:
CSS
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
HTML
<body>
<p class="normal">これは通常のテキストです。</p>
<p class="small-caps">これはスモールキャップスのテキストです。</p>
</body>
追加の値 (CSS Fonts Level 4)
CSS Fonts Level 4はfont-variantプロパティに、all-small-caps, petite-caps,
all-petite-caps, unicase, titling-capsのような追加の値を提供するよ。ただし、これらは全てのブラウザでサポートされているわけじゃないんだ。
4.3 プロパティ font-stretch
プロパティfont-stretchはフォントの圧縮や引き伸ばしの度合いを管理するよ。フォントの高さに影響を与えずに幅を変えるんだ。適切なフォントバリエーションがあれば、それを選ぶのにも役立つんだ。
値:
normal: 通常のフォント幅（デフォルト）ultra-condensed: 一番圧縮されたフォントextra-condensed: とても圧縮されたフォントcondensed: 圧縮されたフォントsemi-condensed: 少し圧縮されたフォントsemi-expanded: 少し引き伸ばされたフォントexpanded: 引き伸ばされたフォントextra-expanded: とても引き伸ばされたフォントultra-expanded: 一番引き伸ばされたフォント
使用例:
CSS
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
HTML
<body>
<p class="normal">これは通常幅のテキストです。</p>
<p class="condensed">これは圧縮幅のテキストです。</p>
<p class="expanded">これは引き伸ばし幅のテキストです。</p>
</body>
GO TO FULL VERSION