font-style
font-styleプロパティは、フォントのスタイル(斜体やイタリック体)を指定します。
英語だと斜体やイタリック体は見栄えよく、見易くもできますが、日本語をイタリック体などにするとモニタ上では読み難いと感じる事も多く、見栄えとしてもあまり良くならないので、日本語ではあまり使われていません。
その為、多くのブラウザがaddress要素やem要素などは、デフォルトでイタリック体(もしくは斜体)を採用していますが、通常体に戻しているケースが多いです。
また、フォントファミリにメイリオを指定していると日本語はそもそもイタリック体にならなかったりします。
- 対応ブラウザ
-
プロパティの解説
- 値
- normal|italic|oblique|inherit
- 初期値
- normal
- 適用される要素
- 全ての要素
- 継承
- します
- パーセント値
- N/A
- メディア
- visual
値の解説
- normal
- 通常体に分類されるフォントになります。
- italic
- イタリック体に分類されるフォントになります。フォント名にItalic、Cursive、Kursiv、などが含まれるとitalicに分類されることが多く、該当するフォントが無い場合は、斜体に分類されても良いとなっています。
- oblique
- 斜体に分類されるフォントになります。フォント名にOblique、Slanted、Incline、などの術語が含まれると斜体に分類されることが多く、該当するフォントが無い場合は、通常体を強制的に傾けて斜体としても良いとなっています。
font-styleのサンプル
ul {
font-size: 2em;
}
ul li.sampleStyle04,
ul li.sampleStyle01 {
font-style: normal;
}
ul li.sampleStyle05,
ul li.sampleStyle02 {
font-style: italic;
}
ul li.sampleStyle06,
ul li.sampleStyle03 {
font-style: oblique;
}
ul li.sampleStyle06,
ul li.sampleStyle05,
ul li.sampleStyle04 {
font-family: Georgia, serif;
}
<ul>
<li class="sampleStyle01">フォントスタイル。 font-style</li>
<li class="sampleStyle02">フォントスタイル。 font-style</li>
<li class="sampleStyle03">フォントスタイル。 font-style</li>
<li class="sampleStyle04">フォントスタイル。 font-style</li>
<li class="sampleStyle05">フォントスタイル。 font-style</li>
<li class="sampleStyle06">フォントスタイル。 font-style</li>
</ul>
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
- フォントスタイル。 font-style
- フォントスタイル。 font-style
- フォントスタイル。 font-style
- フォントスタイル。 font-style
- フォントスタイル。 font-style
- フォントスタイル。 font-style
日本語は見てて残念な感じなのがお分かりになるかと思いますが、日本語がメインのサイトでも英語しか使わない場所などに上手く使っていけば有効に使えるかと思います。