CSS 文字を斜体にするサンプル(font-style)

CSSの文字を斜体にするサンプルです。
font-styleプロパティを使用します。

font-style プロパティ

font-style : 値
説明
normal 通常のフォントです。(初期値)
italic イタリック体(italic)のフォントを指定します。デザインされた斜めの文字です。
oblique 斜体(oblique)のフォントを指定します。単純に文字を斜めにしたものです。
値を継承する

コード

サンプルのコードです。
3,7,11,15行目でfont-styleプロパティを指定をしています。
12行目は、日本語フォントに「MS Pゴシック」を指定しています。

<style>
#sp1{
	font-style:normal;
	font-family:Times New Roman,"メイリオ";
}
#sp2{
	font-style:italic;
	font-family:Times New Roman,"メイリオ";
}
#sp3{
	font-style:italic;
	font-family:Times New Roman,"MS Pゴシック";
}
#sp4{
	font-style:oblique;
	font-family:Times New Roman,"メイリオ";
}
#p1 span{font-size:30px;}
</style>
<body >
<p id="p1">
<span id="sp1">normal   red yellow blue 日本語はメイリオ</span><br>
<span id="sp2">italic   red yellow blue 日本語はメイリオ</span><br>
<span id="sp3">italic   red yellow blue 日本語はMS Pゴシック</span><br>
<span id="sp4">oblique  red yellow blue 日本語はメイリオ</span><br>
</p>
</body>

サンプル

上記コードのサンプルです。
1行目はnormalです。
2行目はitalicです。日本語の部分はフォントが「メイリオ」のため斜めになっていません。
※使用しているPCの環境にフォントの「メイリオ」がない場合は他のフォントで表示されるため斜めになります。
3行目もitalicですが、日本語の部分のフォントが「メイリオ」ではないので斜めになっています。
4行目はobliqueです。

normal red yellow blue 日本語はメイリオ
italic red yellow blue 日本語はメイリオ
italic red yellow blue 日本語はMS Pゴシック
oblique red yellow blue 日本語はメイリオ

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 文字の垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)
CSS 文字の太さを指定するサンプル(font-weight)




△上に戻る