# 字体样式

注意

所有涉及到字体样式需要Fast-UI内置的色彩变量，方便统一修改和维护

# 文本样式

我们在全局样式中，通过view/text提供了对应的class类名，方便您在任何布局标签的地方使用，调用方法，如下：

// class类名
.fu-iconfont {
  font-family: "fu-iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* 在您编写view/text的地方直接使用*/
 <view class="fu-iconfont"></view>
 <text class="fu-iconfont"></text>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 字体大小

文字大小，采用适配像素（upx）

.text-xs {
	font-size: 20upx;
}

.text-sm {
	font-size: 24upx;
}

.text-df {
	font-size: 28upx;
}

.text-lg {
	font-size: 32upx;
}

.text-xl {
	font-size: 36upx;
}

.text-xxl {
	font-size: 44upx;
}

.text-sl {
	font-size: 80upx;
}

.text-xsl {
	font-size: 120upx;
}

/* 在您编写view/text的地方直接使用*/
 <view class="text-xs"></view>
 <text class="text-xs"></text>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 多行溢出

限制在一个块元素显示的文本的行数

.text-cut-2,
.text-cut-3,
.text-cut-4,
.text-cut-5{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.text-cut-2{
  -webkit-line-clamp: 2;
}
.text-cut-3{
  -webkit-line-clamp: 3;
}
.text-cut-4{
  -webkit-line-clamp: 4;
}
.text-cut-5{
  -webkit-line-clamp: 5;
}

/* 在您编写view/text的地方直接使用 以第一个为例*/
 <view class="text-cut-2"></view>
 <text class="text-cut-2"></text>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 文本方向

通过class类名直接控制文本显示方向，向左居中向右

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

/* 在您编写view/text的地方直接使用 以第一个为例*/
 <view class="text-center"></view>
 <text class="text-center"></text>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 删除线

文本删除线（在文字上面添加一行删除线）

.text-through{
  text-decoration: line-through;
}

/* 在您编写view/text的地方直接使用 以第一个为例*/
 <view class="text-through"></view>
 <text class="text-through"></text>

1
2
3
4
5
6
7

# 金额样式

会在文本里面显示一个¥样式

.text-price::before {
	content: "¥";
	font-size: 80%;
	margin-right: 4upx;
}

/* 在您编写view/text的地方直接使用 以第一个为例*/
 <view class="text-price"></view>
 <text class="text-price"></text>

1
2
3
4
5
6
7
8
9

# 其他

包含字体加粗，Y方向行内居中

.text-bold {                                         // 字体加粗
	font-weight: bold;                       
}

.text-content {
	line-height: 1.6;                                // 文本高度居中
}

/* 在您编写view/text的地方直接使用 以第一个为例*/
 <view class="text-bold"></view>
 <text class="text-bold"></text>

1
2
3
4
5
6
7
8
9
10
11

导航颜色样式