HarmonyOS 开发实践 —— 基于Text的自定义字体

原创

小帅聊鸿蒙

发布于 2024-11-26 06:23:40

2600

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

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

方案

在pages的同级目录下创建font目录。
将已有的ttf文件放入font目录中（或者直接放置在rewfile目录下）。
在EntryAbility.ets文件的windowStage.loadContent函数中，通过调用font.registerFont方法注册全局的自定义字体。
注册完成后在所需页面的Text组件上使用fontFamily属性即可。

核心代码

在windowStage.loadContent中进行字体的注册(可通过font.registerFont进行注册)，这样注册完成后，整个应用内都可以使用。

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
 
  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: %{public}s', JSON.stringify(err) ?? '');
  return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});
}

在需要的页面进行使用即可。

@Entry
@Component
struct GlobalFont {
 
  @State imageUrl: string = 'xxxxx'
  @State bgColor: string = "#ffffff"
  @State topSafeHeight: number = 0
  @State checkedIndex: number = 0
  private swiperController: SwiperController = new SwiperController()
 
  build() {
    Column() {
      Stack() {
        Image(this.imageUrl)
          .draggable(false)
          .width("100%")
          .height('100%')
        // 使用注册自定义字体
        Text('氛围感')
          .fontFamily('roundFont')
          .fontColor('#ffffff')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .margin({ top: -500 })
        // 原生字体，没有使用自定义字体
        Text('听听海风的声音~')
          .fontColor('#ffffff')
          .fontSize(30)
          .margin({ top: -400 })
      }
      .width('100%')
      .height('100%')
 
    }
    .height('100%')
    .width('100%')
  }
}

场景二：使用emoji表情。

方案

emoji表情的使用可分为两种：

使用自定义的emoji时：下载需要的的ttf文件，在aboutToAppear的生命周期中进行注册，在当前页面的Text组件上设置fontFamily属性去使用。

使用系统内置的emoji时：直接在Text组件中通过unicode码加载，文字偏少时，建议这么使用。

核心代码

1.使用自定义的emoji时：在生命周期中进行注册。

aboutToAppear(): void {
  font.registerFont({
    // 设置的字体名
    familyName:'emoji',
    // 通过resouce的方式加载ttf文件
    familySrc:$rawfile('NotoColorEmoji-Regular.ttf')
  })
}

给Text组件设置fontFamily属性，fontFamily中的名字就是上面注册时设置的字体名，最后使用的emoji表情，就是从下载的三方emoji字体文件钟直接粘贴得到的。

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

2.使用系统内置的emoji时：直接通过Text去加载相关的unicode码，可通过String.fromCodePoint方法对相关unicode进行解析，再通过Text展示出来。

Flex({direction : FlexDirection.Row,alignItems : ItemAlign.Center}){
  Image('https://xxxx')
    .width(50)
    .height(50)
    .borderRadius(15)
    .margin({left:10,right : 10})
  Text('系统内置的'+String.fromCodePoint(0x1F97A))
    .fontSize(20)
    .backgroundColor('#fff')
    .padding(10)
    .borderRadius(20)
}
.width('90%')