极客笔记CSS 哪个属性用于使字体倾斜
在CSS中，我们可以使用’font-style’属性来设置字体的样式。我们可以将不同的样式作为font-style属性的值，其中’oblique’是其中之一。
基本上，’oblique’字体是文本的松散版本，我们可以设置角度来减小或增加文本的斜度。在这里，我们将在不同的示例中使字体倾斜。
语法
用户可以按照以下语法使用CSS的font-style属性来使字体倾斜。
font-style: oblique;
示例1
在下面的示例中，我们创建了两个
标签，并添加了文本内容以在网页上显示。此外，我们对第一个
标签应用了“font-style：normal”的CSS属性，对第二个
标签应用了“font-style：oblique”的CSS属性。
在输出中，用户可以观察到倾斜字体比正常字体更加随意。
<html>
<head>
<style>
.normal {
font-style: normal;
font-size: 1.5rem;
}
.oblique {
font-style: oblique;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2>Using the <i> font-stlye: oblique </i> to make font oblique.</h2>
<p class = "normal"> This font is Normal font. </p>
<p class = "oblique"> This font is <i> oblique </i> font. </p>
</body>
</html>
示例2（具有倾斜属性的角度，仅适用于Firefox浏览器）
在下面的示例中，我们还添加了“oblique”字体样式属性的角度。限制是角度只在Firefox浏览器中有效。
我们创建了三个不同的div元素并向它们添加了文本。在CSS中，我们对所有字体应用了倾斜属性，并设置了不同的角度。在输出中，用户可以观察到随着角度增加，字体的倾斜度也增加。
<html>
<head>
<style>
.one {
font-style: oblique 40deg;
font-size: 1.5rem;
}
.two {
font-style: oblique 80deg;
font-size: 1.5rem;
}
.three {
font-style: oblique 30deg;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2>Using the <i>font-stlye: oblique</i> to make font oblique.</h2>
<p class = "one">The font style is oblique and slope is 40deg.</p>
<p class = "two">The font style is oblique and slope is 80deg.</p>
<p class = "three">The font style is oblique and slope is 120deg.</p>
</body>
</html>
示例3
在下面的示例中，我们创建了一个div元素，并在多个层级上添加了一些嵌套的div元素。我们使用了父div的“font-style: oblique” CSS属性，用户可以看到div的所有字体都变得歪斜，包括子div元素。
<html>
<head>
<style>
.test {
font-style: oblique;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2>Using the <i>font-stlye: oblique</i> to make font oblique.</h2>
<div class = "test">
This is a parent div.
<div>
This is a child div with font-style: oblique.
<div>
This is another nested child div with font-style: oblique.
</div>
</div>
</div>
</div>
</body>
</html>
用户学会了使用font-style属性制作斜体字体。它与’italic’字体样式几乎相似，因为它也可以创建潦草或草写字体。