font-style－スタイルシートリファレンス

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

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

font-style …… フォントをイタリック体・斜体にする

font-styleプロパティは、フォントのスタイルを指定する際に使用します。指定できる値は、標準（normal）、イタリック体（italic）、斜体（oblique）です。

イタリック体(italic)と斜体（oblique）の違いについてですが、イタリック体（italic）は斜めに傾けて筆記体調などにデザインされたものが多く、斜体（oblique）はシンプルに斜めに傾けてデザインされたものが多いようです。指定したフォントにイタリック体（italic）や斜体（oblique）がない場合には、ブラウザが判断して、そのフォントの標準のものを斜めに傾けて表示します。

日本語フォントの場合、イタリック体（italic）や斜体（oblique）が用意されていることはほとんどなく、標準のものを斜めに傾けて表示しているため、多くの場合イタリック体（italic）と斜体（oblique）のブラウザ上の表示は同じになります。

■値

normal: 標準フォントで表示します。これが初期値です。
italic: イタリック体フォントで表示します。
oblique: 斜体フォントで表示します。

■使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

p.sample1 {font-style: italic; }
p.sample2 {font-style: oblique; }

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">イタリック体を指定。</p>
<p class="sample2">斜体を指定。</p>
</body>
</html>

↓↓↓

ブラウザ上の表示

イタリック体を指定。

斜体を指定。

■関連項目

font …… フォントに関する指定をまとめて行う
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする