微信小程序开发基础 字体样式和文本样式的设置

微信小程序页面主要有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 style="font-family:sans-serif;font-size:30px;">
		<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{
  border: 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;

}