首頁  >  文章  >  web前端  >  css不讓字體傾斜怎麼實現

css不讓字體傾斜怎麼實現

藏色散人
藏色散人原創
2020-12-11 09:18:174795瀏覽

css不讓字體傾斜的實作方法:先建立一個HTML範例檔案;然後定義一組div;最後透過設定屬性「div_normal i{ font-style:normal}」讓文字不傾斜即可。

css不讓字體傾斜怎麼實現

本教學操作環境:windows7系統、css3版、thinkpad t480電腦。

推薦:《css影片教學

font-style屬性相容各大瀏覽器,用來設定文字的顯示樣式。使用font-style:normal即可讓文字不傾斜。

取值:

normal : 正常的字體

italic : 斜體。對於沒有斜體變數的特殊字體,將應用oblique

oblique : 傾斜的字體

下面,我們對div盒子裡的文字字體設定為italic斜體,oblique傾斜體,使用font- style:normal去掉html 斜體標籤預設斜體樣式。

1、css程式碼:

<style> 
    .div_italic{ font-style:italic} 
    .div_oblique{ font-style:oblique} 
    .div_normal i{ font-style:normal} 
    /* 去掉div_normal对象I斜体标签默认斜体样式 */ 
</style>

2、html程式碼片段:

<div class="div_italic">我被加斜体</div> 
<div class="div_oblique">我被加倾斜</div> 
<div><i>我加I标签斜体</i></div> 
<div class="div_normal"><i>I斜体被CSS去掉</i></div>

3、效果

css不讓字體傾斜怎麼實現

以上是css不讓字體傾斜怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn