在CSS中,我們可以使用‘font-style’屬性來設定字體的樣式。我們可以使用不同的樣式作為 font-style 屬性的值,「oblique」就是其中之一。
基本上,「傾斜」字體是文字的草率版本,我們設定角度來減少或增加文字的斜度。在這裡,我們將在各個範例中使字體傾斜。
使用者可以依照下列語法使用 CSS 的 font-style 屬性使字體傾斜。
font-style: oblique;
在下面的範例中,我們建立了兩個
標記,並在其中新增了文字以顯示在網頁上。此外,我們也為第一個
標記套用了「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>
在下面的範例中,我們也使用「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>
在下面的範例中,我們建立了 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中文網其他相關文章!