HarmonyOS 鸿蒙Next中rictText加载html字符串时设置font-family无效

HarmonyOS 鸿蒙Next中rictText加载html字符串时设置font-family无效

<div style="font-size: 100px !important;text-weight: bold; text-align: center !important; font-family: 'YuanHei', sans-serif !important;">
  欢迎来到<span style='color: #F93834;'>鸿蒙世界</span>
</div>

项目里已经注册并且使用过YuanHei字体，但是richtext无法正常加载，应该怎么实现？

4 回复

【问题分析】

我尝试用了三种方式来加载楼主给出的富文本信息，样式基本是一致的

【解决方案】

1.使用富文本组件RichText进行加载

2.使用Web组件加载

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct FocusTestPage {
  @State data: string = `
<div style="font-size: 100px !important;text-weight: bold; text-align: center !important; font-family: 'YuanHei', sans-serif !important;">
  欢迎来到<span style='color: #F93834;'>鸿蒙世界</span>
</div>
`;
  webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      RichText(this.data)
        .height(300)
      Web({ src: '', controller: this.webviewController })
        .onControllerAttached(() => { // 当Controller成功绑定到Web组件时触发该回调
          this.webviewController.loadData(this.data, "text/html", "UTF-8", " ", " ")
        })
        .width('100%')
        .height(300)
        .minFontSize(30)

    }
  }
}

实现效果

cke_4715.png

3.在电脑上使用html文件直接加载富文本

cke_9759.png

【总结】

三种效果没有明显差异，楼主参考是否与你想要的效果一致

【参考文档】

Web加载富文本，如何自适应高度-华为开发者问答 | 华为开发者联盟

更多关于HarmonyOS 鸿蒙Next中rictText加载html字符串时设置font-family无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


【问题背景】：根据反馈只能得知html代码设置了字体样式，但是不知道是如何注册的

【原理】：

自定义字体的注册是指将字体文件（如ttf、otf文件等）从应用资源注册到系统中，使得应用能够使用这些字体进行文本渲染。注册过程是将字体文件通过字体管理接口注册到系统字体库中，以便在应用中进行调用。

【解决思路】：

  1. 先在全局注册一下字体
import { text } from '@kit.ArkGraphics2D'
// 注册自定义字体
let fontCollection = text.FontCollection.getGlobalInstance()

// 字体文件放在本应用工程的entry/src/main/resources/rawfile目录
fontCollection.loadFontSync('YuanHei',$rawfile('YuanHei.ttf'))

cke_1572.png

2、使用下列标签查看是否生效

<p style="font-size: 35px; font-family: YuanHei; color: rgb(24,78,228)">测试</p>

在HarmonyOS Next中，rictText组件加载HTML字符串时font-family属性无效，是因为当前版本对CSS字体样式支持不完整。鸿蒙的rictText基于自有渲染引擎实现，仅支持部分标准HTML/CSS属性。font-family需要依赖系统字体库，而鸿蒙Next的Web组件暂未完全开放字体系统接口。可通过使用系统预设字体样式或转换为Span文本分段样式处理。该限制已在官方文档的兼容性说明中标注。

在HarmonyOS Next中，RichText组件默认不支持通过HTML字符串直接加载自定义字体（如’YuanHei’）。这是因为系统出于安全性和性能考虑，限制了HTML内联样式中的font-family属性。

建议通过以下方式实现：

  1. 将自定义字体文件（如YuanHei.ttf）放在项目的resources/base/media目录下。
  2. 在aboutToAppear生命周期中使用font模块加载字体：
import { font } from '@kit.ArkUI';

// 加载字体
font.registerFont({
  familyName: 'YuanHei',
  src: 'resources/base/media/YuanHei.ttf'
});
  1. 对RichText外层容器设置字体样式：
// 在RichText的父组件上设置字体
struct Index {
  build() {
    Column() {
      RichText($rawfile('your_html_content.html'))
        .fontFamily('YuanHei')  // 直接设置字体
    }
    .width('100%')
    .height('100%')
  }
}

如果必须使用HTML内容，可以考虑：

  • 将HTML内容转换为原生ArkUI组件
  • 使用Web组件加载本地HTML文件（需注意性能影响）

当前RichText对CSS的支持有限，建议优先使用ArkUI的原生样式设置方式。

回到顶部