How to solve the problem of slow page rendering and flickering caused by using a custom font library in a Web component
Problem phenomenon
In order to enable the Web component to use local fonts when loading pages, the page rendering speed can be accelerated. However, when using the webStandardFont() method of the Web component to set the font, it is found that the page rendering speed is slow and the page flickers.
Background knowledge
Introduction to @font-face in CSS
CSS Property Inheritance
Positioning ideas
The current webStandardFont method supports a limited number of system fonts, and custom fonts are invalid. After setting the font, the web component will redraw the web page because the local font is used, which causes flickering.
Solution
You can use CSS @font-face to customize fonts and store them in the rawfile directory. Then, set the corresponding font attributes in the H5 element, and the corresponding custom font in the rawfile directory can be loaded when the Web component is first loaded.
The code example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* Define custom fonts. If they exist in the rawfile, they will take effect*/
@font-face {
font-family: baigetianxing;
src: url("font/baigetianxing.ttf");
}
/* Define custom font */
@font-face {
font-family: HarmonyOS_Sans_Condensed_Light_Italic;
src: url("file:///system/fonts/HarmonyOS_Sans_Condensed_Light_Italic.ttf");
}
</style>
</head>
<body>
<div>
<div>
Default font
<p>The p tag inherits the font properties of the parent element</p>
<button>The button does not inherit the font properties of the parent element</button>
</div>
<div style="font-family:baigetianxing">
Custom fonts
<p>The p tag inherits the font properties of the parent element</p>
<button>The button does not inherit the font properties of the parent element</button>
</div>
<button style="font-family:baigetianxing">Custom font button</button>
</div>
</body>
</html>
Top comments (0)