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

css不讓字體傾斜怎麼實現

藏色散人
發布: 2023-01-04 09:36:44
原創
4858 人瀏覽過

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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板