首頁 > web前端 > css教學 > 主體

使用哪個屬性使字體傾斜?

WBOY
發布: 2023-08-30 14:25:12
轉載
1423 人瀏覽過

使用哪個屬性使字體傾斜?

在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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板