微信小程序之CSS操作字体

最新推荐文章于 2025-06-19 15:14:33 发布

原创最新推荐文章于 2025-06-19 15:14:33 发布 · 4.2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序设置字体颜色 #微信小程序设置字体大小 #微信小程序设置字体背景 #微信小程序css设置 #微信小程序

微信小程序专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了WXSS中关于字体样式的各项属性及其使用方法，包括字体大小、字体样式、字体粗细、字体名称等，并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.字体大小

属性：

font-size

取值：

代码：

wxss代码：

.view_normal_css {
  width: 100px;
  height: 50px;
  margin: 10px;
  font-size:smaller;
}

wxml代码：

<view class="view_normal_css">字体大小</view>

效果：

2.字体样式

属性：

font-style

取值：

代码：

wxss代码：

.view_normal_css {
  width: 100px;
  height: 50px;
  margin: 10px;
  font-size:smaller;
  font-style:italic; 
}

效果：

即

font-style:italic：斜体效果。

font-style:inherit：正常效果。

font-style:initial：正常效果。

font-style:normal：正常效果。

font-style:oblique：斜体效果。

font-style:unset：正常效果。

3.字体的粗细

属性：

font-weight

取值：

代码：

wxss代码：

.view_normal_css {
  width: 100px;
  height: 50px;
  margin: 10px;
  font-size:smaller;
  font-weight:bold;
}

效果：

4.设置字体名称

属性：

font-family

取值：

代码：

wxss代码：

.view_normal_css {
  width: 100px;
  height: 50px;
  margin: 10px;
  font-size:smaller;
  font-family:cursive;
}

效果：

5.文字是否横向拉伸变形

属性：

font-stretch

取值：

代码：

wxss代码：

.view_normal_css {
  width: 100px;
  height: 50px;
  margin: 10px;
  font-size:smaller;
  font-stretch:expanded;
}

效果：

说明：

normal：正常文字宽度。

ultra-condensed：比正常文字宽度窄4个基数。

extra-condensed：比正常文字宽度窄3个基数。

condensed：比正常文字宽度窄2个基数。

semi-condensed：比正常文字宽度窄1个基数。

semi-expanded：比正常文字宽度宽1个基数。

expanded:比正常文字宽度宽2个基数.

extra-expanded：比正常文字宽度宽3个基数。

ultra-expanded：比正常文字宽度宽4个基数。

6.添加外部的字体

@font-face:通过这个可以添加外部的字体。

参考：

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1211&highlight=%E5%A4%96%E9%83%A8%E5%AD%97%E4%BD%93

7.文本大小写字母

属性：

font-variant

取值：

代码：

wxss代码：

.view_normal_css {
  width: 300px;
  height: 50px;
  margin: 10px;
  font-size:smaller;
  font-variant:small-caps;
}

wxml代码：

<view class="view_normal_css">My name Is wjn</view>

效果：

即不论字体是否大写小写全部改成大写。