微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-weight字体加粗

╰半橙微兮° 2024-02-19 16:00 63阅读 0赞

### font-weight字体加粗 ###

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

**基础用法**

font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。  
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

实例
    p.normal {font-weight:normal;}
    p.thick {font-weight:bold;}
    p.thicker {font-weight:900;}

### 小程序应用 ###

> Wxml代码

<view>
      <text>默认字体</text>
    </view>
    
    <view >
      <text class='cls1'>字体 normal</text> 
    </view>
    <view >
      <text class='cls2'>字体 bold</text> 
    </view>
    <view >
      <text class='cls3-a'>字体 100</text> 
    </view>
    <view >
      <text class='cls3-b'>字体 500</text> 
    </view>
    <view >
      <text class='cls3-c'>字体 900</text> 
    </view>

> Wxss代码

.cls1{
      font-weight: normal;
    }
    .cls2{
      font-weight: bold;
    }
    .cls3-a{
      font-weight: 100;
    }
    .cls3-b{
      font-weight: 500;
    }
    .cls3-c{
      font-weight: 900;
    }
    效果

如下图  
![微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-weight字体加粗][-_wxss_css_-_-font-weight]

[欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css]

![微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css 1]

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