使用哪個屬性使字體傾斜？
- WBOY轉載
- 2023-08-30 14:25:121431瀏覽
在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 屬性製作傾斜字體。它幾乎與“斜體”字體樣式相似，因為它也會創建草書或草書字體。
以上是使用哪個屬性使字體傾斜？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除