“This is the 18th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Some time ago, the owner’s father asked for a more personal request: to use a special font they had purchased for copyright in their small program. Good fellow, I instant ten thousand horse gallop, my 30 meter broadsword? How party A father is God, party A father thought of us as far as possible is to achieve, party a father did not think of we want to achieve in advance.

How do you do that?

Do some research and explore the technical solutions before starting the training.

Technical difficulties

1. Wechat restrictions

Everyone who has developed wechat small programs should know that the wechat platform has restrictions on the size of small programs:

  • The whole small program all subcontracting size is not more than 20M

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

Because of this limitation, fonts cannot be placed in local resources, so the only way out is to put the resources in third-party CDN resources. However, there is one point to note when using CDN resources: you need to configure a legitimate domain name.

2. Compatible with models

After initial testing, it was found that using custom fonts was not compatible on different models, especially Android phones. After a certain number of tests, a shallow conclusion is drawn: TTF font is relatively compatible on iOS phones, and there will be a problem of failure of special models on Android phones.

Here, I can not help but make fun of two words, this period of time for model adaptation, Huawei Hongmeng and Apple XS really tortured me to death, often with some different from the public models of the problem.

After some searching, two solutions were found:

  • Use CSS styles to introduce a variety of font types, including.ttf and.woff

  • Use wechat official API — wx.loadFontFace

After careful consideration, we finally adopted the second plan.

documentation

  1. Font file returns contet-type reference font that will fail parsing if the format is not correct.
  2. Font links must be HTTPS (ios does not support HTTP)
  3. Font links must be homologous, or have CORS support enabled, the applets domain name isservicewechat.com
  4. The Faild to load font can be ignored
  5. ‘2.10.0’ previously only worked on the calling page.

It is important to reiterate that font links must be homologous or have CORS support enabled.

I used third-party CDN resources at that time, but CORS support was not configured, so it did not take effect on Android phones. Another reason it’s hard to check is that cORS support is not configured on emulators and iphones, but it still works, which is weird.

Experience optimization

Although wx.loadFontFace is an official API, there is a painful experience problem: wx.loadFontFace reloads every time it enters the page, and the font flashes.

The problem of flashing fonts is relatively easy to experience. Loading effect is added before fonts are loaded, and fonts are loaded as soon as entering the portal.

The problem of loading fonts every time is alleviated by lazy mode, but not completely solved (CDN resources will be cached, so consider whether the cache resources exist to determine whether to load fonts, but unfortunately, it is not implemented yet).

    let loadStatus = false;

    if(! loadStatus) {` `` wx.loadFontFace({ family: '... ', source: 'url("..." )', success() { loadStatus = ture; }});Copy the code

At the end

Ok, finished work, start fishing, I hope to help you.

Finally, welcome to like and follow, and discuss in the comments section below.