初识微信小程序 字体样式设置

设计一个小程序，分别利用style和class属性设置字体样式，在index.wxss中定义样式类。所有的文字都包含在一个边框内，边框内上方有标题文字，边框和标题样式利用class属性来设置，在app.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>

/**app.wxss**/
.box{
  border:1px solid silver;
  margin: 20rpx;
  padding: 20rpx;
}

.title{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color: red;
}

/**index.wxss**/
.fontStyle {
  font-family: cursive;
  font-size: 25px;
  font-style: italic;
  font-weight: bold;
}

属性名称	含义	说明
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设置字体样式

• view组件支持使用style、class属性来设置组件的样式。
• 利用style可直接在WXML文件中设置，利用class需要先在WXSS文件中定义样式类。
• 静态样式一般使用class设置，动态样式一般使用style设置，这样可以提高渲染速度。

在index.wxss和app.wxss中定义样式类

• 在app.wxss中定义的样式类属于全局样式类，可以在项目的任何文件中使用。
• 在index.wxss中定义的样式类一般只在index.wxml中使用。