微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-style字体风格

傷城~ 2024-02-19 15:59 6阅读 0赞

### font-style字体风格 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

**基础用法**  
font-style 属性最常用于规定斜体文本。

**该属性有三个值：**  
normal - 文本正常显示  
italic - 文本斜体显示  
oblique - 文本倾斜显示  
italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。  
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

**实例**

p.normal {font-style:normal;}
    p.italic {font-style:italic;}
    p.oblique {font-style:oblique;}

### 小程序应用 ###

> Wxml代码

<view>
      <text>默认字体</text>
    </view>
    
    <view >
      <text class='cls1'>字体 italic</text> 
    </view>
    <view >
      <text class='cls2'>字体 oblique</text> 
    </view>

> Wxss代码

.cls1{
      font-style: italic;
    }
    .cls2{
      font-style: oblique;
    }

效果如下图  
![微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-style字体风格][-_wxss_css_-_-font-style]

[欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css]  
![微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-style字体风格][-_wxss_css_-_-font-style 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-_-font-style]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/df526b908ef443a38976580c8dd32c62.png
[wxss_css]: https://ke.qq.com/course/368613?tuin=2b10d56
[-_wxss_css_-_-font-style 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f1808f1cf02348499296b91a2fae983c.png