フォントのスタイルを設定する

CSS - font-style

概要

CSSプロパティ「font-style」は、フォントのスタイルを指定することができます。指定できる値は、標準の他に、イタリック体(italic)、斜体(oblique)があります。

<p class="font-style">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font-style {
  font-style: italic;
}
</style>

値の指定方法

{ font-style: 値}

「italic」と「oblique」 はどちらも斜体ですが、違いとしてはitalicは筆記体を基にした傾斜をもつ字体であるのに対し、obliqueは単純に字形を傾けたデザインと言えます。指定した値がそのフォントにない場合、自動的に変換されます。日本語フォントの場合だと、用意されてない場合が多く、見た目の違いを得ることは難しいかもしれません。

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

プロパティの種類について

「font」プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。

プロパティ名説明
fontフォントに関する指定をまとめて行うショートハンドプロパティ
font-styleフォントのスタイルを指定する
font-variantフォントのスモールキャップ指定する
font-weightフォントの太さを指定する
font-sizeフォントのサイズを指定する
font-familyフォントの種類を指定する
font-size-adjustフォントのサイズを調整する
font-stretchフォントを縦長・横長にする
<p class="font-italic">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<p class="font-oblique">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font-normal {
  font-weight: normal;
}
.font-italic {
  font-style: italic;
}
.font-oblique {
  font-style: oblique;
}
</style>

使用例

タイトルや、文中に変化をつけたい時などに使用した例です。

<p class="oblique">今日の天気</p>
<p>今日の東京の天気は<span class="italic">晴れ</span>です</p>
<p>今日の長野の天気は<span class="oblique">雨</span>です</p>
<style>
.oblique {
  font-style: oblique;
}
.italic {
 font-style: italic;
}
</style>

仕様書

関連CSSプロパティ