微信小程序开发笔记1 字体样式的设置

微信小程序页面主要有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中使用。