小程序CSS入门

小程序样式课程-第21课-字体-font-weight字体加粗

时间:2019/1/2 15:33:49  作者:互联网  来源:网络转载  查看:27361  评论:0
内容摘要:font-weight字体加粗基础用法font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,...

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;

}

效果如下图

  小程序样式课程-第21课-字体-font-weight字体加粗

欢迎大家支持我的视频课程:微信小程序样式开发入门 
小程序样式课程-第1课-样式基础-元素选择器


相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |