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

发布于 1周前 作者 h691938207 最后一次编辑是 5天前 来自 鸿蒙OS

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 {
        font-family: baigetianxing;
        src: url("font/baigetianxing.ttf");
        }
        /* 定义自定义字体 */
        @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教程
1 回复

针对HarmonyOS 鸿蒙Next使用Web组件设置自定义字库导致页面渲染太慢且画面闪烁的问题，可以尝试以下解决方案：

  1. 优化字体加载：确保字体文件路径正确，并在应用启动时或特定页面加载前通过font.registerFont方法注册字体。这有助于减少字体加载对页面渲染的影响。
  2. 减少资源消耗：检查自定义字库文件的大小，确保它不会过大导致加载缓慢。可以尝试使用更简洁的字体文件或压缩现有字体文件。
  3. 使用本地字体：通过webStandardFont方法设置字库可能不是加载本地字库的最佳方式，因为它可能涉及网络请求和额外的渲染时间。建议直接使用本地字库文件，并通过font.registerFont方法进行注册。
  4. 预加载和缓存：利用鸿蒙系统提供的预加载和缓存机制，提前加载和缓存页面所需的资源，包括自定义字库，以减少页面加载时间和闪烁现象。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部