Mar. 24th,2020
プロパティについて
概要
| 初期値 | “font-style: normal;” |
| 適用対象 | すべての要素 |
| 継承 | Yes |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 数値 |
| アニメーション | 計算値(“normal”は“oblique 0deg”として扱う) |
“font-style”プロパティはテキストを表示するのにフォントのイタリック体もしくは斜体を使用するかを指定するプロパティです。
イタリック体は筆記体に似た装飾のある一般的には右にやや傾いた書体のことです。斜体(オブリーク体、“Oblique type”)は通常の書体をそのまま平行四辺形のように斜めに変形させた書体です。
サンプルコード
p { font-style: oblique;}
値
| 値 | 説明 |
|---|---|
| normal | 通常の書体を選択します (“oblique 0”と同じです。) |
| italic | イタリック体を選択します (フォントのバリエーションにイタリック体がない場合は斜体を選択します。) |
| oblique | 斜体を選択します (“oblique 14deg”と同じです。フォントのバリエーションに斜体がない場合、“font-synthesis-style: auto;であれば通常の書体から斜体を生成します。) |
oblique <angle> |
“-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”より大きいイタリック体を昇順で利用可能なものが見つかるまで探します。
使用例
通常の書体を使用する
<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年以上も前にナギコが書き残した意見に賛同したい。
