HarmonyOS鸿蒙Next中使用Web组件设置自定义字库导致页面渲染太慢且画面闪烁的问题如何解决

HarmonyOS鸿蒙Next中使用Web组件设置自定义字库导致页面渲染太慢且画面闪烁的问题如何解决

【问题现象】

为了使Web组件加载页面时，可以使用本地字库，加快页面的渲染速度。但是，在使用Web组件的webStandardFont()方法设置字库时，却发现页面渲染的速度较慢，且页面会出现闪烁的情况。

【背景知识】

【定位思路】

当前webStandardFont方法支持的系统字库有限，自定义字库无效。并且在设置字体后，因为使用了本地的字库，导致Web组件会重绘网页，即出现闪烁的情况。

【解决方案】

可以改用CSS的[@font-face](/user/font-face)自定义字体，并将自定义字体存放在rawfile目录下。再结合H5元素设置对应字体属性，即可在Web组件首次加载时就加载rawFile下对应的自定义字体。

代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* 定义自定义字体 rawfile下有的话就生效*/
        [@font-face](/user/font-face) {
        font-family: baigetianxing;
        src: url("font/baigetianxing.ttf");
        }
        /* 定义自定义字体 */
        [@font-face](/user/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>
        默认字体
        <p>p标签继承父元素字体属性</p>
        <button>按钮不继承父元素字体属性</button>
    </div>
    <div style="font-family:baigetianxing">
        自定义字体
        <p>p标签继承父元素字体属性</p>
        <button>按钮不继承父元素字体属性</button>
    </div>
    <button style="font-family:baigetianxing">自定义字体按钮</button>
</div>
</body>
</html>

更多关于HarmonyOS鸿蒙Next中使用Web组件设置自定义字库导致页面渲染太慢且画面闪烁的问题如何解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中使用Web组件设置自定义字库导致页面渲染太慢且画面闪烁的问题如何解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


改用CSS的@font-face自定义字体，并将自定义字体存放在rawfile目录下。结合H5元素设置对应字体属性，即可在Web组件首次加载时就加载rawFile下对应的自定义字体。

回到顶部