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

这里分别用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中使用。

各种文本属性命名及其含义：

样例图： 各页面源代码：

<!--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;

}