位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 字体加粗(font-weight)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 字体变形(font-variant) 下一篇: 轮廓(outline)

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所示

image.png


上一篇: 字体变形(font-variant) 下一篇: 轮廓(outline)
毕业设计网             广告联系QQ:45157718(微信同号)