Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use custom fonts in WeChat Mini Programs, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use custom fonts in WeChat Mini Programs. Let's take a look.

Technical difficulties 1. Wechat restrictions

Anyone who has developed WeChat Mini Programs should know that the Wechat platform has restrictions on the size of Mini Program:

The size of all subcontracts of the whole Mini Program does not exceed 20m.

The size of a single subcontract / main package cannot exceed 2m

Because of this limitation, there is certainly no way to put fonts in local resources, so there is only one way out and put resources in third-party cdn resources. But there is one thing to note when using cdn resources: you need to configure a legitimate domain name.

two。 Model compatibility

After preliminary tests, it is found that the compatibility of using custom fonts is different on different models, especially Android phones. After a certain number of tests, we come to a superficial conclusion: the compatibility of ttf fonts is better on iOS phones, and the failure of special models will occur on Android phones.

At this point, I can't help complaining that Huawei Hongmeng and Apple xs have really tortured me during this period of time, and I often have problems that are different from those of popular models.

After some search, two solutions were found:

Using css styles, introduce a variety of font types, including .ttf and .woff types

Use Wechat's official api-wx.loadFontFace

After careful consideration, we finally adopted the second scheme.

Documentation description

The contet-type reference font returned by the font file will fail parsing if it is not in the correct format.

Font link must be https (ios does not support http)

Font links must be homologous, or cors support must be enabled. The domain name of Mini Program is servicewechat.com.

The hint in the tool Faild to load font can be ignored

'2.10.0 'previously only took effect on the calling page.

The important thing is to emphasize again and again: font links must be homologous, or cors support must be enabled.

At that time, it was due to the use of third-party cdn resources, but did not configure cors support, resulting in Android phones have not been effective. And another reason that is more difficult to troubleshoot is that there is no cors support on the simulator and iPhone, but it still works, which is strange.

Experience optimization

Although wx.loadFontFace is an official api, there is an excruciating experience: every time wx.loadFontFace enters the page, it downloads again and the font flashes.

The problem of font flashing is relatively easy to experience, adding a loading effect before the font is loaded, and loading fonts as soon as you enter the portal.

The problem of loading each time is alleviated by lazy mode, but it is not completely solved (because cdn resources are cached, so consider judging whether a font needs to be loaded by judging whether a cache resource exists, but unfortunately, it hasn't been implemented yet), just rub the code right now.

Let loadStatus = false; if (! loadStatus) {```wx.loadFontFace ({family: '...', source: 'url ("..."), success () {loadStatus = ture;}}); global font set by WeChat Mini Programs

When WeChat Mini Programs sets the global css, you need to set the style of the page in the app.wxss file

Page {font-family: "PingFangSC-Thin"; font-size:32rpx; / * WeChat Mini Programs, use rpx as a unit * /} this is the end of the article on "how to use custom fonts in WeChat Mini Programs". Thank you for reading! I believe you all have a certain understanding of "how to use custom fonts in WeChat Mini Programs". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.