HarmonyOS开发之Text自定义字体

精选原创

Datcon 2024-09-14 09:33:52 博主文章分类：Harmony ©著作权

©著作权归作者所有：来自51CTO博客作者Datcon的原创作品，请联系作者获取转载授权，否则将追究法律责任

随着HarmonyOS NEXT的发展，开发者们能够更加灵活地定制应用的视觉体验，包括但不限于自定义字体的使用。本文将介绍如何在HarmonyOS NEXT应用中实现自定义字体的加载与使用，并涵盖使用emoji表情以及处理特殊字符的显示等场景。

场景一：应用设置三方字体

方案概述

要在HarmonyOS NEXT应用中使用自定义字体，首先需要将字体文件(.ttf)放置到指定位置，并在应用启动时注册该字体。

步骤：

创建字体目录：在pages同级目录下创建一个font目录。
放置字体文件：将字体文件（如AlimamaFangYuanTiVF-Thin.ttf）放置到font目录或resfile目录中。
注册字体：在EntryAbility.ets文件的windowStage.loadContent函数中调用font.registerFont方法注册全局自定义字体。
使用自定义字体：在需要的页面中，通过fontFamily属性指定所注册的字体名称来使用自定义字体。

核心代码示例

onWindowStageCreate(windowStage: window.WindowStage): void {
  windowStage.loadContent('pages/Index', (err) => {
    font.registerFont({
      familyName: 'roundFont',
      familySrc: '/font/AlimamaFangYuanTiVF-Thin.ttf'
    });
    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %s', JSON.stringify(err));
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
  });
}

@Entry
@Component
struct GlobalFont {
  build() {
    Column() {
      Text('氛围感')
        .fontFamily('roundFont')
        .fontColor('#ffffff')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin({ top: -500 });
      Text('听听海风的声音~')
        .fontColor('#ffffff')
        .fontSize(30)
        .margin({ top: -400 });
    }
    .height('100%')
    .width('100%');
  }
}

场景二：使用emoji表情

方案概述

使用emoji表情有两种方式：一种是使用自定义的emoji字体文件；另一种是直接使用系统内置的emoji表情。

核心代码示例

自定义emoji

aboutToAppear(): void {
  font.registerFont({
    familyName: 'emoji',
    familySrc: $rawfile('NotoColorEmoji-Regular.ttf')
  });
}

Flex({ direction: FlexDirection.RowReverse, alignItems: ItemAlign.Center }) {
  Text('通过注册自定义字体得到的emoji')
    .fontFamily('emoji')
    .fontSize(20)
    .backgroundColor('#ffc6ecf3')
    .padding(10)
    .borderRadius(20);
}.width('90%').margin(20);

系统内置emoji

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  Text('系统内置的' + String.fromCodePoint(0x1F97A))
    .fontSize(20)
    .backgroundColor('#fff')
    .padding(10)
    .borderRadius(20);
}.width('90%');