このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

font-style:イタリック体と斜体

記事Mar. 24th,2020
文字をイタリック体や斜体にするプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 font-style: normal;
適用対象 すべての要素
継承 する
パーセント値 パーセント値は指定できません
計算値 数値
アニメーション 算出された値による(“normal”は“oblique 0deg”として扱う)

font-style”プロパティはテキストを表示するのにフォントのイタリック体もしくは斜体を使用するかを指定するプロパティです。

イタリック体は筆記体に似た装飾のある一般的には右にやや傾いた書体のことです。斜体(オブリーク体、“Oblique type”)は通常の書体をそのまま平行四辺形のように斜めに変形させた書体です。

サンプルコード

p { font-style: oblique;}

説明
normal 通常の書体を選択します (“oblique 0”と同じです。)
italic イタリック体を選択します (フォントのバリエーションにイタリック体がない場合は斜体を選択します。)
oblique 斜体を選択します (“oblique 14deg”と同じです。フォントのバリエーションに斜体がない場合、font-synthesis-style: auto;であれば通常の書体から斜体を生成します。)
oblique <angle>CSS Fonts Module Level 4 で追加 -90deg”以上、“90deg”以下の<angle>”値で(正の角度は時計回り、負の角度は反時計回りの傾斜を表します。)
共通キーワード

テキストを表示するのに使用されているフォントで指定した値に一致する角度の斜体が使用できない場合はそれに近い角度のものが使用されます。指定された値によって利用できる斜体の角度の探し方は異なり、以下で示した方法で利用可能な角度が探されます。

指定した値が“20deg”以上である場合
指定した値よりも大きい角度の斜体を昇順で探し、なければ指定した値よりも小さい角度の斜体を“0deg”まで降順で利用可能な角度のものが見つかるまで探します。
次にfont-synthesis-style: auto;であり、“slnt”軸のある可変フォントであれば一致する“slnt”値の斜体を生成し、そうでなければせん断変換によって代替の斜体を生成します。
次に“ital”値が“1”以上のイタリック体を昇順で探し、なければ“1”未満のイタリック体を“0”まで降順で利用可能なものが見つかるまで探します。
次に“0deg”未満の角度の斜体を降順で利用可能な角度の斜体が見つかるまで探します。
次に“ital”値が“0”以下のイタリック体を降順で利用可能なものが見つかるまで探します。
指定した値が“0deg”以上、“20deg”未満の場合
指定した値よりも小さい角度の斜体を“0deg”まで降順で探し、なければ指定した値よりも大きい角度の斜体を昇順で利用可能な角度のものが見つかるまで探します。
次にfont-synthesis-style: auto;であり、“slnt”軸のある可変フォントであれば一致する“slnt”値の斜体を生成し、そうでなければせん断変換によって代替の斜体を生成します。
次に“ital”値が“1”未満のイタリック体を降順で“0”まで探し、なければ“1”以上のイタリック体を昇順で利用可能なものが見つかるまで探します。
次に“0deg”未満の角度の斜体を降順で利用可能な角度の斜体が見つかるまで探します。
次に“ital”値が“0”以下のイタリック体を降順で利用可能なものが見つかるまで探します。
指定した値が“-20deg”より大きく、“0deg”未満の場合
指定した値よりも大きい角度の斜体を“0deg”まで昇順で探し、なければ指定した値よりも小さい角度の斜体を降順で利用可能な角度のものが見つかるまで探します。
次にfont-synthesis-style: auto;であり、“slnt”軸のある可変フォントであれば一致する“slnt”値の斜体を生成し、そうでなければせん断変換によって代替の斜体を生成します。
次に“ital”値が“-1”より大きいイタリック体を昇順で“0”まで探し、なければ“-1”以下のイタリック体を降順で利用可能なものが見つかるまで探します。
次に“0deg”より大きい角度の斜体を昇順で利用可能な角度の斜体が見つかるまで探します。
次に“ital”値が“0”より大きいイタリック体を昇順で利用可能なものが見つかるまで探します。
指定した値が“-20deg”以下である場合
指定した値よりも小さい角度の斜体を降順で探し、なければ指定した値よりも大きい角度の斜体を“0deg”まで昇順で利用可能な角度のものが見つかるまで探します。
次にfont-synthesis-style: auto;であり、“slnt”軸のある可変フォントであれば一致する“slnt”値の斜体を生成し、そうでなければせん断変換によって代替の斜体を生成します。
次に“ital”値が“-1”以下のイタリック体を降順で探し、なければ“1”より大きいイタリック体を“0”まで降順で利用可能なものが見つかるまで探します。
次に“0deg”より大きいの角度の斜体を降順で利用可能な角度の斜体が見つかるまで探します。
次に“ital”値が“0”より大きいイタリック体を昇順で利用可能なものが見つかるまで探します。

仕様書

Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
font-style
定義あり

定義あり

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
normal
定義あり

定義あり

定義あり

定義あり
italic
定義あり

定義あり

定義あり

定義あり
oblique
定義あり

定義あり

定義あり

定義あり
oblique <angle>
定義なし

定義なし

定義なし

定義あり

使用例

通常の書体を使用する

<p>
ナギコは「<span>猫は上のかぎり黒くてことはみな白き</span>」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「<span>The Calico cat is the ultimate type of cat</span>」だと言った。それにعَاتِكَةは「<span>أنا أحب القطط البيضاء أكثر من غيرها</span>」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
</p>
span { font-style: normal;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

イタリック体を使用する

<p>
ナギコは「<span>猫は上のかぎり黒くてことはみな白き</span>」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「<span>The Calico cat is the ultimate type of cat</span>」だと言った。それにعَاتِكَةは「<span>أنا أحب القطط البيضاء أكثر من غيرها</span>」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
</p>
span { font-style: italic;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

斜体を使用する

<p>
ナギコは「<span>猫は上のかぎり黒くてことはみな白き</span>」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「<span>The Calico cat is the ultimate type of cat</span>」だと言った。それにعَاتِكَةは「<span>أنا أحب القطط البيضاء أكثر من غيرها</span>」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
</p>
span { font-style: oblique;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

span { font-style: oblique 40deg;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク