HarmonyOS 鸿蒙Next中RichEditor自定义字体渲染问题

HarmonyOS 鸿蒙Next中RichEditor自定义字体渲染问题

问题描述

使用 RichEditor 的 addTextSpan() 方法添加文本时，即使 fontFamily 参数设置为正确的自定义字体名称，编辑器中渲染的字体仍然是系统默认字体。

复现步骤

  1. 在 aboutToAppear() 中使用 font.registerFont() 注册自定义字体
  2. 在 RichEditor 的 onReady 回调中，使用 richEditorController.addTextSpan() 添加文本
  3. addTextSpan 的 style.fontFamily 参数设置为注册的字体名称（如 "LXGWWenKai"）

预期行为

编辑器中显示的文本应使用自定义字体（霞鹜文楷）。

实际行为

编辑器中显示的文本使用系统默认字体。

排查结果

  • 字体注册成功：font.registerFont() 无异常
  • 参数传递正确：日志显示 addTextSpan 的 style.fontFamily = "LXGWWenKai" 正确传入
  • 其他组件正常：同一页面中 Text 组件使用 .fontFamily("LXGWWenKai") 显示正确
  • 手动编辑后正常：用户在编辑器中输入或删除字符后，字体会刷新为正确字体

关键代码

// 字体注册（aboutToAppear 中）
font.registerFont({
  familyName: 'LXGWWenKai',
  familySrc: $rawfile('fonts/LXGWWenKai.ttf')
});

// 添加文本
this.richEditorController.addTextSpan(content, {
  style: {
    fontColor: '#FFFFFF',
    fontSize: 18,
    fontFamily: 'LXGWWenKai',  // 参数正确，但渲染不生效
    lineHeight: 32.4
  }
});

关键日志

========== addTextSpan 字体追踪 ========== editorSettings.fontFamily（原始值）= “霞鹜文楷” getActualFontFamily() 返回值 = “LXGWWenKai” 即将传入 addTextSpan 的 style:

  • fontColor: “#FFFFFF”
  • fontSize: 18
  • fontFamily: “LXGWWenKai” ✓ 参数正确
  • lineHeight: 32.4

结论

疑似 RichEditor.addTextSpan() 在首次渲染时没有正确使用自定义字体，我该如何解决？

环境信息

  • HarmonyOS 版本：[6.0.0.125]
  • SDK 版本：[6.0.1(21)]

更多关于HarmonyOS 鸿蒙Next中RichEditor自定义字体渲染问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙Next中RichEditor自定义字体渲染可通过Font类实现。使用Font.Builder加载自定义字体文件，设置字体样式与大小后，通过RichEditor的setFont方法应用。需确保字体文件格式为.ttf或.otf，并正确放置于resources/base/media目录下。渲染效果受系统字体管理机制限制，部分复杂字体特性可能不支持。

更多关于HarmonyOS 鸿蒙Next中RichEditor自定义字体渲染问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的渲染时序问题。RichEditor 在首次通过 addTextSpan() 设置内容时，其内部的字体资源可能尚未完成加载或绑定，导致自定义字体渲染失败。后续手动编辑触发的重绘流程会强制应用正确的字体样式。

解决方案：

在 addTextSpan() 后，立即调用 RichEditorController 的 setEditorSettings() 方法，重新设置一次编辑器样式，强制触发一次完整的样式重计算和应用。

修改后的核心代码示例：

// 1. 添加文本
this.richEditorController.addTextSpan(content, {
  style: {
    fontColor: '#FFFFFF',
    fontSize: 18,
    fontFamily: 'LXGWWenKai',
    lineHeight: 32.4
  }
});

// 2. 【关键】强制刷新编辑器样式
this.richEditorController.setEditorSettings({
  defaultStyle: {
    fontColor: '#FFFFFF',
    fontSize: 18,
    fontFamily: 'LXGWWenKai', // 重新设置字体
    lineHeight: 32.4
  }
});

原理说明： setEditorSettings() 会更新编辑器的全局默认样式，并立即触发所有内容的重新渲染。这个操作绕过了初始 addTextSpan() 可能存在的内部状态未就绪的问题，确保字体样式被正确应用。

其他注意事项：

  1. 字体注册时机：确保 font.registerFont() 在 aboutToAppear 或更早的生命周期中执行，且同步完成。可以添加日志确认注册成功后再进行 RichEditor 的初始化。
  2. 字体名称一致性：registerFont 的 familyName、addTextSpan 的 fontFamily 以及 setEditorSettings 的 fontFamily 必须使用完全相同的字符串。
  3. 性能：此方法会触发一次额外的全局渲染，但对性能影响极小，是解决此问题的标准做法。

通过上述步骤，可以确保 RichEditor 在初始化内容时即正确渲染自定义字体。

回到顶部