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

版权声明：摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86490879

font-weight字体加粗

基础用法

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)（微信小程序界面设计必备技能）