HarmonyOS 鸿蒙Next：web组件如何加载本地字库？

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

HarmonyOS 鸿蒙Next：web组件如何加载本地字库？

web组件如何加载本地字库？web组件可通过webStandardFont()方法设置字库，但是这种方法好像不是加载的本地字库而且渲染太慢且有一个闪烁的过程。我们想用web直接去加载本地有的字库，这样快速的渲染出页面，实现秒开

Harmonyos Next教程
2 回复

web加载字体示例：

<!DOCTYPE html>
<html>
<head>
   <title>自定义字体样式</title>
   <style>
       /* 定义自定义字体 rawfile下有的话就生效 */
       @font-face {
           font-family: HarmonyOS_Sans_Condensed_Black_Italic;
           src: url("HarmonyOS_Sans_Condensed_Thin_Italic.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 style="font-family: HarmonyOS_Sans_Condensed_Black_Italic; font-size: 36px;">
       自定义字体
   </div>
   <div style="font-family: HarmonyOS_Sans_Condensed_Light_Italic; font-size: 36px;">
       自定义字体
   </div>
</body>
</html>

在HarmonyOS 鸿蒙Next中，Web组件加载本地字库可以通过以下步骤实现：

  1. 放置字体文件：

    • 在应用的资源目录中创建一个font目录（如果尚未存在），通常与pages目录同级。
    • 将本地字库文件（如.ttf格式）放置到font目录或resfile目录中。

  2. 注册字体：

    • 在应用启动时或特定页面加载时，通过font.registerFont方法注册字体。
    • 指定familyName（字体名称）和familySrc（字体文件路径）。

  3. 使用字体：

    • 在Web组件或Text组件中，通过fontFamily属性指定已注册的字体名称。

注意事项：

  • 确保字体文件路径正确无误。
  • 注册字体应在组件使用字体之前进行。
  • 如果Web组件需要动态加载字体，可能需要考虑在组件加载完成后进行字体注册。

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

回到顶部