微信小程序之CSS操作字体

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>

 

效果：

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