introduce
In the development of WeChat applets, we often use font icons to beautify the interface and display various functions. However, when the size of the main package of our applet exceeds 2M, we may encounter a problem: the font icon file is very large, causing the size of the entire package to exceed the limit. To solve this problem, we can use the wx.loadFontFace method to load font icons remotely.
step
Step 1: Prepare font files
First, we need to upload the font icon file to an accessible remote server. Make sure the font file is in .ttf format, which is one of the formats supported by WeChat applets.
Step 2: Obtain the network address of the font file
On the remote server, after uploading the font file, we need to obtain the network address (URL) of the file. You can directly access the link of the font file, open the font file in the browser, and then copy the URL in the address bar.
Step 3: Use wx.loadFontFace to load font files
wx.loadFontFace
In the code of the applet, find the place where the font icon needs to be used, and then use the wx.loadFontFace method to load the font file. This way, when the page is rendered, the font files will be downloaded from the remote server and applied to the page. If you want to use it globally, you can load it in app.js
Here is a sample code:
wx.loadFontFace({
family: 'my-iconfont',
source: 'url("https://example.com/iconfont.ttf")',
success: function(res) {
console.log('字体加载成功');
},
fail: function(res) {
console.error('字体加载失败', res);
}
});
In the code above, we specified a custom font name ( my-iconfont) and provided the URL of the remote font file. When the font is loaded successfully, a success message will be output to the console; if there is a problem, an error message will be output to the console.
Step 4: Use font icons on the page
font-familyWhen the font is loaded successfully, we can apply the font icon by setting properties in the style file of the page . For example:
.icon {
font-family: 'my-iconfont';
}
iconThen, we can use the class to display the font icon in the page of the applet . For example:
<view class="icon"></view>
In the above code is the Unicode code point of a font icon.
Font icon failed to load FAQ
Dynamically load web fonts, and the file address must be a download type. Starting from 2.10.0, it supports global effect and needs to be called in app.js.
- The contet-type reference font returned by the font file will fail to parse if the format is incorrect.
- The font link must be https (ios does not support http)
- The font link must be under the same source, or cors support is enabled, and the domain name of the applet is servicewechat.com.
The tool prompts Failed to load font and can be ignored. - 2.10.0'before it only took effect on the calling page.
in conclusion
By using the wx.loadFontFace method to remotely load font icons, we can solve the problem that the main package size of the WeChat applet exceeds the 2M limit. This method is simple and easy, and can maintain the overall performance of the applet. Hope this article helps you! custom directory title)