Recently, a project needs, all need to change the text font applet.
After the investigation, it found that local load the font file that is causing the applet is too big. Dynamic load files, Apple really perfect machine, but the introduction of Android on the real machine will be very slow to load external fonts, there is no obvious default font switch to external fonts process, very poor experience.
Finally, a small sub-program in the form of perfect solution, so do the next summary, we hope to help people in need.
The introduction of external fonts, known in two ways.
1. Local loaded.
The external font file (type .ttf, .eot etc.) https://transfonter.org/ uploaded to the site, into a form of base64 code, then the css file following the conversion of 64 yards to paste the applet public app.css style file reference.
(Note here: convert fonts for 64 yards when the site, the more ticked suffix (such as ttf, woff), the larger the size of the resulting 64 yards, not the same tick here do not know what will be different, I think it should be possible there will not be the same as applicable environmental some differences, there are clear wish of my brother let me know. I was for the ultimate small, just check the woff, 1M generated 64 yards, Android and Apple are not yet appear display issues)
introducing ways to:
@font-face {
font-family: 'FZBYS';
src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAADTxgABAAAAAW4twAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNA后面一长串省略。。。
(font-family: 'FZBYS' FZBYS the variable name, self-setting.)
reference is:
(no need to write at the top of the file css @import '... / ... / ...' )
page{
font-family:'FZBYS';
}
Advantages : loading a local load, fast loading speed. Applet into the page (including Android) font has been replaced with a new font, there will be no transition.
Disadvantages : 1. Most downloaded from the Internet directly down the source document are large, about 3-8 m, even more than 10 M, 64 yards transformed code size and font files similar, so the introduction of 64 yards in most cases, a small program size will exceed 2M, leads to upload.
Solution : simply need to change their text fonts from the font source file "out" out, reducing the file size of the font, because the font source file most complex words and symbols we use less. Specific methods for the use Node font compression plug-in font-spider, reference links attach a font-spider uses
https://www.jianshu.com/p/b5f9605951f5
2. Dynamic load
Dynamic load is divided into two
1.css links to external font
write the following code to the public css style files, and then need to reference the font style css file to use.
Introducing ways to:
@font-face {
font-family:'FZBYS';
src:url('https://***.com/***/***/FZBYS.TTF') format('truetype');
}
Reference is:
page{
font-family:'FZBYS';
}
2.js links to external fonts
introducing ways to:
wx.loadFontFace({
family: 'FZBYS',
source: 'url("https://***.****.com/font/FZBYS.TTF")',
success: function (e) {
console.log(e, '动态加载字体成功')
},
fail: function (e) {
console.log(e, '动态加载字体失败')
},
})
Reference is:
page{
font-family:'FZBYS';
}
Advantages : 1. The font file does not need to be converted to 64 yards, more convenient.
Disadvantages : 1 dynamic loading font files, Apple real machine perfection, but introduced on the Android real machine external font loading is slow, there will be the process of significant default font switch to external fonts, experience teaches poor, especially the font file the larger, slower to load, and even some small program page can not be loaded successfully.
Solution : 1 file compression smaller font 2. If you do not care about experience, then this font switching process also do not care about 3. It is recommended to use the local load.
The last case of my solution is to small sub-program, how subcontractors can refer to the following this link https://blog.csdn.net/weixin_44510465/article/details/89208139
Sub basic requirement is to limit the size of the applet from the expanded configuration to 2M 8M, no packets from the applet into the main package and is composed of a plurality of sub-packets, the sub-packet can have 2, 3, 4 , a number, as long as the overall size of not more than 8M, and each sub-packet size does not exceed 2M.
Local load the font file, which has been converted into 64 yards back into the font style app.wxss in (app.wxss fall within the main package, reference links to share details above), as long as the main package size does not exceed 2M, even if successful .