資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究哪個屬性用於使字型傾斜？
在 CSS 中，我們可以使用“font-style”屬性來設定字型的樣式。我們可以使用不同的樣式作為 font-style 屬性的值，而“oblique”就是其中之一。
基本上，“oblique”字型是文字的傾斜版本，我們可以設定角度來減小或增大文字的傾斜度。在這裡，我們將透過各種示例使字型傾斜。
語法
使用者可以按照以下語法使用 CSS 的 font-style 屬性使字型傾斜。
font-style: oblique;
示例 1
在下面的示例中，我們建立了兩個<p>標籤，並在其中添加了文字以在網頁上顯示。此外，我們為第一個<p>標籤應用了“font-style: normal”CSS 屬性，為第二個<p>標籤應用了“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”font-style 屬性中添加了角度。限制是角度僅適用於 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 屬性建立傾斜型別的字型。它與“italic”字型樣式幾乎相同，因為它也會建立傾斜或草書字型。
更新於： 2023年4月11日
260 次檢視
廣告