トップページの中の プロパティの中の Fのプロパティ一覧の中の font-style

font-style

  • 最終更新:2009年12月13日 18:03

font-styleプロパティは、フォントのスタイル(斜体やイタリック体)を指定します。

英語だと斜体やイタリック体は見栄えよく、見易くもできますが、日本語をイタリック体などにするとモニタ上では読み難いと感じる事も多く、見栄えとしてもあまり良くならないので、日本語ではあまり使われていません。
その為、多くのブラウザがaddress要素やem要素などは、デフォルトでイタリック体(もしくは斜体)を採用していますが、通常体に戻しているケースが多いです。
また、フォントファミリにメイリオを指定していると日本語はそもそもイタリック体にならなかったりします。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

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

日本語は見てて残念な感じなのがお分かりになるかと思いますが、日本語がメインのサイトでも英語しか使わない場所などに上手く使っていけば有効に使えるかと思います。

このページの上部へ