ほんっとにはじめての HTML5 と CSS3

フォントのスタイルを指定するには font-styleプロパティを使います。

ここでのフォントのスタイルとは、文字を斜体にするかどうかだけ。
font-style: normal は、通常の正体のフォントフェイス。
font-style: italic や font-style: oblique は、斜体のフォントフェイスを選択できます。

1. font-styleプロパティの値
   1. italic と oblique
2. font-styleプロパティの使いどころ

フォント関連のプロパティは、fontショートハンドプロパティで まとめて指定することができます。今回も含めて数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント（書体）を指定しよう

【26-2】font-sizeプロパティでフォントのサイズを指定しよう

【26-3】font-weightでフォントのウェイト（太さ）を指定しよう

【26-4】font-stretch で condensed などの文字幅を選択しよう

【26-5】font-styleプロパティでフォントを斜体に指定しよう　←今日はココ

【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう

【26-7】フォントをまとめて指定する fontショートハンドプロパティ

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font - CSS | MDN

font-styleプロパティの値

font-styleプロパティの値には、キーワードが3つあるだけです。

font-styleプロパティの値
キーワード	normal, italic, oblique normalがデフォルト値。フォントファミリー内の normal に分類されるフォントフェイスを選択。 italic は フォントファミリー内の italic に分類されるフォントフェイスを選択。 oblique は フォントファミリー内の oblique に分類されるフォントフェイスを選択。 italic, oblique が無くても、ブラウザは「斜体」で表示する。
グローバル値	font-style: inherit; 親のfont-styleの値を継承（コレ書かなくても継承するけど） font-style: initial; 継承した親の font-styleの値を解消しデフォルト値に戻す font-style: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

italic と oblique

font-style: italic で、使っているフォントファミリーに「italic」で分類されているフォントフェイスがあれば、それを使用します。
もし「italic」が無くて「oblique」があれば「oblique」の方を使います。

font-style: oblique も同じく、「oblique」があればそれを使用し、「oblique」が無くて「italic」があれば「italic」を使います。

最初からどっちもない場合（日本語や中国語のフォントとか）は、ブラウザは斜体のスタイルで（=斜めに傾けて）表示します。

ちなみに、Italicは元はベネツィアで聖書のために考案された手書き書体。なので小文字が手書きっぽいものが多い。Obliqueは斜体という言葉そのまま、傾いたデザインのもの。
と言っても実際には Italic と言っても斜体なだけのフォントもあるようです。

下のサンプルは、上のカラムは font-style:italic, 下のカラムは font-style:oblique を指定しています。ぜんぶ斜体になってますね。

「Times New Roman」「Trebuchet MS」は「italic」を持ち、「Avenir」は「oblique」のフォントを持っています。
font-style: italic、oblique のどちらで指定しても、同じように表示されますね。
指定したフォントが無い環境なら、ブラウザのデフォルトフォントで表示されますが、それでも斜体のスタイルで表示されます。

日本語テキストの部分は、当然ブラウザのデフォルトフォントで表示されますが、これも斜体になって表示されています。

上の見本のソースコードはこんなかんじで作っています。

<div class="mihon">
  <span style="font-family:'Times New Roman',Times,serif; font-style:italic">"Times New Roman"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:Trebuchet MS,sans-serif; font-style:italic">"Trebuchet MS"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Avenir',sans-serif; font-style:italic">"Avenir"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
</div>

<div class="mihon">
  <span style="font-family:'Times New Roman',Times,serif; font-style:oblique">"Times New Roman"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:Trebuchet MS,sans-serif; font-style:oblique">"Trebuchet MS"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Avenir',sans-serif; font-style:oblique">"Avenir"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
</div>

<style>
div.mihon {
    font-size:16px;
    line-height:1.2;
    color:black;
    margin:1em 0;
    border:solid 1px #ccc;
    padding:0 .7em
    }
div.mihon span {
    display:block;
    margin:1em 0
    }
</style>

font-styleプロパティの使いどころ

HTMLの要素で、テキストのブラウザデフォルトスタイルが「斜体」になるのは以下のものです。（それぞれクリックすると、該当の記事が別ウィンドウで開きます）
・em
・i　
・address
・cite
・dfn
・var
これらは、ブラウザのデフォルトスタイルが font-style: italic になっています。

ですので「斜体で表現したい」時は、その役割を担う要素があるならそれを使うべき。
強調したいなら <em>要素、連絡先なら <address>要素といった具合です。
文法的に正しく が HTML5 のモットーなので。

で、例えばフッター部分で <address>要素を使ったけど、デザイン的に特に斜体にしたく無くて、他のテキストと同じ正体にしたい時がありますよね。
そんな時には、

address {
    font-style: normal;
    }

などと指定して、正体に戻します。

たぶん、font-styleプロパティを使うシーンって、このくらいじゃないかなあ。

次回予告

次回は、line-heightプロパティを使います。
これは、テキストの「行間（行の高さ）」を指定するプロパティ。フォントサイズとともに、とても良く使うプロパティです。

関連記事

• 【29】文字間を自動調整してくれる font-kerningプロパティ
• 【28】ボールドやイタリックを合成するか決める font-synthesis
• 【27】フォントサイズを調整する font-size-adjustプロパティ
• （ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて
• （ちょっとメモ）@font-face で Webフォントを使おう
• 【26-7】フォントをまとめて指定する fontショートハンドプロパティ
• 【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう
• 【26-5】font-styleプロパティでフォントを斜体に指定しよう
• 【26-4】font-stretch で condensed などの文字幅を選択しよう
• 【26-3】font-weightでフォントのウェイト（太さ）を指定しよう
• 【26-2】font-sizeプロパティでフォントのサイズを指定しよう
• 【26-1】font-familyプロパティでフォント（書体）を指定しよう
• 【25-3】クリッピングに便利！ shape-outside と shape-margin
• 【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう
• 【25-1】切り抜き（クリッピング）のための新プロパティ clip-path