1.基础语法

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

如果将元素的加粗关键字设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗；关键字lighter与此相反。

       代码示例

小白教程网www.2d5.net

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

2.小程序应用

根据基础的语法，下面在微信小程序中实现字体加粗的定义。

.wxml文件代码示例

小白教程网www.2d5.net

<view>
  <text>默认字体</text>
</view>
<view >
  <text>字体 normal</text>
</view>
<view >
  <text>字体 bold</text>
</view>
<view >
  <text>字体 100</text>
</view>
<view >
  <text>字体 500</text>
</view>
<view >
  <text>字体 900</text>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

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

效果如图3-20所示。