Fonts applet introduced Precautions

Applet fonts introduced in two ways,
first is through @font-face, the second method is provided by small programs loadFontFace .

The introduction of different ways but generally need to pay attention just like:

The official made the following precautions
contet-type font reference font file returns, it will fail when parsing format is incorrect.
Font link must be https (ios not support http)
fonts must be homologous to the next link or opened cors support, domain applet is servicewechat.com
Canvas and other native component does not support adding fonts to use interface
tool in tips Faild to load font can be ignored
'2.10.0' previously only take effect in the calling page.

In general

  1. Micro-channel network only supports end applets font, font linking 必须是https, so the method is not feasible to introduce local. (Think, too. Font package motionless a few M, it is difficult to compile)
  2. The introduction of Chinese fonts, errors occur when the volume is too large
  3. Tool tips in Faild to load font can be ignored (do not see the Developer Tools in tips to think that there is a problem)

Here are several ways to record several solutions fonts introduced:

1. fonts turn base64
Here Insert Picture Description

  • Open Fonts online conversion tool https://transfonter.org/
  • Css file will open after the download, unzip, copy, paste just fine
  • It should be noted that, where the maximum possible upload fonts 10M

2. The second is a method provided by the official, Chinese pulled out section, reduced in volume, or, instead of the picture.
Instead of pictures we all know, here it pulled out of recording text, text to pull away, we need to use a tool
Fontmin

Here Insert Picture Description

  • After downloading the installation package decompression software
    Here Insert Picture Description
  • On the left side we can use to enter text, click generation, you will get a new font library, which involves a new ttf css file and import documents.
  • Finally, as long as the need to look at, whether it is the introduction of base64 or introduce new ttf fonts are possible.

3. Consider the plug
because the uni-app I'm using this multiport development, so there will be a variety of plug-in plug-in library, where the official recommended a font plug-introduced https://ext.dcloud.net.cn/plugin? = 954 the above mentioned id
(because I have not used this plug-in, so do not record, are interested can go and see)

the above

Published 62 original articles · won praise 9 · views 30000 +

Guess you like

Origin blog.csdn.net/qq_37026254/article/details/104617619