WeChat applet development and application - font style setting

Requirement: Set font style.

1. Open the WeChat developer tools and create a mini program, as follows:
Insert image description here
2. Set the project name and path of the mini program, and select the development language as JavaScript, as follows:
Insert image description here
3. The main part of the mini program consists of three files, and all It should be placed in the root directory of the project, that is app.js(描述小程序的逻辑), app.json(描述小程序的公共配置), app.wxss(描述小程序的公共样式表). The last file style sheet here is not necessary. These files can be found in the resource manager, as follows: The
Insert image description here
page part of the applet is composed of four file types, which are in pages Directory, respectively, .js(负责页面逻辑), .json(负责页面结构), .wxml(负责页面配置), .wxss(负责页面样式表).json and .wxss file types are not required and can also be found in the resource manager, as follows:
Insert image description here
4. Under the wxml file type under page configuration, use the style tag or class tag To set the font style, it sets the defined style class only at index.

WXML (WeiXin Markup Language) is a set of tag languages ​​designed by the framework. The WXML page serves as the entrance to some of our logical behaviors and the carrier of effect display. It can be understood as HTML language.

Set the font style through the style attribute:
style='font-family:' (设置字体类型), its value is the name of the font.
style='font-size:'(字体大小), its value represents the font size through px, rpx, cm, or can also be represented through small, medium, large, etc.
style='font-style:'(字体倾斜), its value is represented by italic, normal, etc.
style='font-weight:'(字体粗细), its value is represented by bold, bolder, lighter, etc.
For example, the following wxml code sets the font type to italic, the font size to 20 pixels, and the font to be italic and bold:

<!--index.wxml-->
<view style="font-family:楷体;font-size:20px;font-style:italic;font-weight:bold">
  WXML(WeiXin Markup Language)是框架设计的一套标签语言开发中 WXML 页面就作为我们一些逻辑行为的入口,以及效果展示的承载者,可以把它理解为HTML语言。
</view>

The simulator runs as follows:
Insert image description here

Guess you like

Origin blog.csdn.net/qq_43085848/article/details/120479069