2021-11-08、文本字体样式引入及其设置
2021-11-07 本文已影响0人
疋瓞
1、如何将微信小程序当中同一项目中其他文件的样式导入到当前文件样式当中?
方法:@import'其他文件样式(wxss)路径';
例子:@import '../dem_0/dem_0.wxss';
2、微信小程序中文和英文文本设置
2.1、中文文本设置
wxml:
<view class="title">文本样式设置</view>
<view class="style01">
<text>设置文本颜色,设置文本对齐方式,设置文本缩进,设置字母间距,设置文档中的空白处,设置文本修饰样式,设置文本修饰颜色。</text>
</view>
wxss:
.style01{
color:red;
letter-spacing: 5px;
text-align: left;
text-indent: 50px;
text-decoration: underline;
text-decoration-color: #00f;
line-height: 30px;
white-space: normal;
}
2.2、英文文本设置
wxml:
<view class="style02">
<text>
color text-align text-indent letter-spacing word-spacing white-space text-decoration text-decoration-color
</text>
</view>
wxss:
.style02{
text-align: justify;
word-spacing: 20px;
text-transform: uppercase;
white-space: pre-wrap;
}
3、总结:
3.1、用到的字体属性说明
-
color:字体颜色
-
letter-spacing: 中文字体间隔
-
word-spacing: 英文字体间隔
-
text-align: 字体对齐方式
text-align当中的参数设置 -
text-indent: 字体缩进
-
text-decoration: 字体修饰
text-decoration的参数.jpg -
text-decoration-color: 字体修饰的颜色
-
line-height: 行间距
-
white-space: 空白部分设置(字体中原有的空格,换行等)
white-space参数设置.jpg