Table of contents

I. Introduction

This article will introduce how to use style and class to set font styles when designing WeChat applets.

Our goal is to make the following effects.

Before realizing the above effect, we must first master some basic knowledge.

The view component supports the use of style and class attributes to set the style of the component. The style class referenced by class can be defined in index.wxss and app.wxss. The styles defined in the former can generally only be used in this page; while the styles defined in the latter are global styles and can be used in any page of the project.

2. Case realization

1. Write index.wxml code

The code uses the style and class attributes of the view component to set the font style.

Among them, the style is set directly inside the tag, and the class needs to define the style class in the wxss file, and then reference it in wxml. (It can be understood that a function is written here, and the specific definition of the function needs to be written in another file)

.box and .title are used to set the border and title styles respectively. They are defined in app.wxss. They are global styles and can be used in any wxml file in the project.

font-style and font-size are used to set font style properties. Commonly used font style attributes are:

Attributes	meaning	Example of attribute value
font-family	font type	serif, cursive, official script, Song style...
font-size	font size	6px/rpx/cm，large，small...
font-style	font italic	italic，normal，oblique...
font-weight	font weight	bold，bolder，lighteer...

The following is the index.wxml file

<!--index.wxml-->
<view class='box'>
  <view class='title'>字体样式设置</view>
  <view style='font-family: "隶书";font-size: 30px;'>
    <view>利用style设置字体样式</view>
    <view>字体:隶书,30像素</view>
  </view>
  ============================
  <view class='fontStyle'>
    <view>利用class设置字体样式： </view>
    <view>字体：Cursive、25像素、倾斜、加粗</view>
  </view>
</view>

2. Write app.wxss file code code

In app.wxss, we will define two global styles .box and .title

/**app.wxss**/
.box{/**定义用于设置边框的样式**/
  margin:20rpx;                 /**外边距**/
  padding: 20rpx;               /**内边距**/
  border: 1px solid silver;   /**边框1px、实线、银灰色**/
}

.title{
  font-size: 25px;              /**字体大小**/
  text-align: center;           /**居中对齐**/
  margin-bottom: 15px;          /**下边距**/
  color: red;                 /**红色**/
}

3. Write index.wxss file code

We will define the .fontStyle style class in this file, which can only be used in index.wxml.

.fontStyle{
  font-family: Cursive;   /**字体类型**/
  font-size: 25px;        /**字体大小**/
  font-style: italic;     /**字体倾斜**/
  font-weight: bold;      /**字体加粗**/
}

3. Code compilation

After writing all the above codes, click "compile" or press the shortcut key ctrl+s to see the running effect during the simulation period

ending ps:

When using the style and class attributes to set the component style, it is necessary to analyze the specific situation. Static styles are generally written in class, and dynamic styles are generally written in style. The purpose of this is to improve the editability of the code in different situations and to improve the rendering speed.

【WeChat applet development】Font style setting