Can WeChat mini programs reference special fonts?

Can the WeChat applet reference special fonts?

Can reference special fonts.

The specific method is as follows:

Method 1: Convert to base64 format

1. Download the font to be used, it is recommended TTF format

2. Open the website https://transfonter.org/ and convert the format to get the compressed package

3. After decompressing the compressed package, copy the contents of stylesheet.css to the applet You can use the public style

Recommended learning: Mini program development

Method 2: Dynamic loading of network fonts (recommended)

Dynamic loading of web fonts. The file address must be of download type. iOS only supports https format file addresses.

wx.loadFontFace({
  family: 'HYQH-50S',
  source: 'url("https://www.xxx.com/font/HYQH-50S.ttf")',
  success: function (res) {
    console.log(res.status)
  },
  fail: function (res) {
    console.log(res.status)
  },
  complete: function (res) {
    console.log(res.status);
  }
});

Regarding the font link source, you need to pay attention to several points:

1. The font link must be of download type

2. The font link must be https

3. The font link must be from the same source, or enable cors support

The usage is also very simple, just set the font-family directly in css

view {
	font-family: "HYQH-50S" !important;
}

PHP Chinese website, a lot thinkphp tutorial, welcome to learn!

The above is the detailed content of Can WeChat mini programs reference special fonts?. For more information, please follow other related articles on the PHP Chinese website!