使用哪个属性使字体倾斜？

百变鹏仔 3个月前 (09-20) #CSS

文章标签属性

在CSS中，我们可以使用‘font-style’属性来设置字体的样式。我们可以使用不同的样式作为 font-style 属性的值，“oblique”就是其中之一。

基本上，“倾斜”字体是文本的草率版本，我们设置角度来减小或增大文本的斜度。在这里，我们将在各个示例中使字体倾斜。

语法

用户可以按照以下语法使用 CSS 的 font-style 属性使字体倾斜。

font-style: oblique;

示例 1

在下面的示例中，我们创建了两个

标记，并在其中添加了文本以显示在网页上。此外，我们还为第一个

标记应用了“font-style: normal”CSS 属性，为第二个

标记应用了“font-style: oblique”CSS 属性。

在输出中，uesrs 可以观察到倾斜字体比正常字体更马虎。

<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（具有Oblique属性的角度，仅适用于Firefox浏览器）

在下面的示例中，我们还使用“oblique”字体样式属性添加了角度。限制是该角度仅适用于 Firefox 浏览器。

我们创建了三个不同的 div 元素并向它们添加了文本。在 CSS 中，我们将 font-style oblique 属性应用于所有不同角度的字体。在输出中，用户可以观察到随着角度的增加，字体的斜度也会增加。

<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 属性制作倾斜字体。它几乎与“斜体”字体样式相似，因为它也会创建草书或草书字体。

文章推荐

使用哪个属性使字体倾斜？

语法

示例 1

示例2（具有Oblique属性的角度，仅适用于Firefox浏览器）

示例 3

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写