font-styleプロパティで指定できる値
font-styleプロパティは次のような値を設定することができます。
| 値 | 内容 |
|---|---|
| normal | 初期値 |
| italic | イタリック体（テキストが斜めに傾く） |
| oblique | 斜体。傾きの度合いを数値で指定することができる。 |
使用例
font-styleプロパティの指定例です。
obliqueは「30deg」など傾きを指定することができますが、対応していないフォントでは機械的に斜体として表示されます。
今回の例で使用しているフォント「Noto Sans JP」ではItalicと同等の表示になります。
CSS コード例
@font-face {
src: url("./fonts/NotoSansJP/NotoSansJP.woff") format("woff");
font-family:'NotoSansJP';
font-style: normal;
font-weight: 100 900;
font-variation-settings: "wght" 375;
font-stretch: 1% 500%;
}
.sample1 p {
margin-bottom: 20px;
font-family: 'NotoSansJP';
}
.sample1 .text1 {
font-style: normal;
}
.sample1 .text2 {
font-style: italic;
}
.sample1 .text3 {
font-style: oblique;
}
.sample1 .text4 {
font-style: oblique 30deg;
}
.sample1 .text5{
font-style: oblique 60deg;
}HTML コード例
<div class="sample1">
<h1>フォント: NotoSansJP</h1>
<p class="text1">テキストサンプル(normal)</p>
<p class="text2">テキストサンプル(italic)</p>
<p class="text3">テキストサンプル(oblique)</p>
<p class="text4">テキストサンプル(oblique 30deg)</p>
<p class="text5">テキストサンプル(oblique 60deg)</p>
</div>