⼩程序开发基础字体样式和⽂本样式的设置
⼩程序页⾯主要有4个页⾯，分别是：
js页⾯、json页⾯，wxml页⾯、wxss页⾯
他们的功能分别是：
js：页⾯逻辑⽂件
json：页⾯配置⽂件
wxml：页⾯描述⽂件
wxss：页⾯样式表⽂件
各种字体样式属性命名及其含义：
属性名称含义说明
font-family字体类型Serif、Sans-serif、Monospace、Cursive、Fantasy、…
font-size字体⼤⼩5px/rpx/cm, large, small,medium, larger, smaller, …
font-style字体倾斜italic, normal, oblique, …
font-weight字体加粗bold, bolder, lighter, …
这⾥分别⽤style和class属性设置字体样式，在index.wxss中定义样式类。⽂字包含在边框内。边框上⽅有居中标题。实现效果：
各页⾯源代码：
<!--index.wxml-->
<view class="box">
<view class="title">标题</view>
<view >
<view>利⽤style设置字体样式：</view>
<view>字体：sans-serif，30像素
</view>
</view>
=====================
<view class="fontStyle">
<view>利⽤class设置字体样式：</view>
<view>字体：cursive，25像素，倾斜，加粗</view>
</view>
</view>
/**index.wxss**/
.fontStyle{
font-family: cursive;
font-size:25px;
font-style: italic;
font-weight: bold;
}
/
**app.wxss**/
.box{
fontweight属性boldborder:1px solid silver;
margin:20rpx;
padding:20rpx;
}
.title{
font-size:25px;
text-align: center;
margin-bottom:15px;
color:palevioletred;
}
view组件⽀持使⽤ style、class 属性来设置组件的样式，静态的样式⼀般写到 class 中，动态的样式⼀般写到 style 中，这样可以提⾼渲染速度。
class引⽤的样式类可以在index.wxss和app.wxss中定义。
在app.wxss中定义的样式类属于全局样式类，可以在项⽬的任何⽂件中使⽤。
在index.wxss中定义的样式类⼀般只在index.wxml中使⽤。
各种⽂本属性命名及其含义：
属性名称含义
color字体颜⾊
text-align⽂本的对齐⽅式
text-indent⾸⾏缩进
letter-spacing字母之间的距离
word-spacing单词间距，以空格来区分单词
white-space⽂档中的空⽩处
text-decoration⽂本修饰样式
text-decoration-color⽂本修饰颜⾊
样例图：
各页⾯源代码：
<!--index.wxml-->
<view class="box">
<view class="title">⽂本样式设置</view>
<view class="textStyle01">
风急天⾼猿啸哀，渚清沙⽩鸟飞回。
⽆边落⽊萧萧下，不尽长江滚滚来。
万⾥悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。
</view>
============================
<view class="textStyle02">
single spark can start a prairie fire,single spark can start a prairie fire,single spark can start a prairie fire,single spark can start a prairie fire.
</view>
</view>
/**app.wxss**/
.box{
border:1px solid silver;
margin:20rpx;
padding:20rpx;
}
.title{
font-size:25px;
text-align: center;
margin-bottom:15px;
color:palevioletred;
}
/**index.wxss**/
.textStyle01 {
color: #00f;
letter-spacing:10px;
text-align: left;
text-indent:50px;
text-decoration: underline;  text-decoration-color:aqua;  line-height:30px;
white-space: normal;
}
.textStyle02{
text-align: justify;
word-spacing:20px;
text-transform: uppercase;  white-space: pre-wrap;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。