微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-variant字体变形

红太狼 2024-02-19 16:00 31阅读 0赞

### font-variant字体变形 ###

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

**基础用法**  
font-variant 属性可以设定小型大写字母。  
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

**实例**

p {font-variant:small-caps;}

### 小程序应用 ###

> Wxml代码

<view>
      <text>默认字体</text>
    </view>
    
    <view >
      <text class='cls1'>字体 This is font:normal</text> 
    </view>
    <view >
      <text class='cls2'>字体 This is font:small-caps</text> 
    </view>

> Wxss代码

.cls1{
      font-variant: normal;
    }
    .cls2{
      font-variant: small-caps;
    }

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

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

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