HarmonyOS 鸿蒙Next中怎么设置字体

【背景知识】

自定义字体是指开发者根据应用需求创建或选择的字体，通常用于实现特定的文字风格或满足独特的设计要求。当应用需要使用特定的文本样式和字符集时，可以注册并使用自定义字体进行文本渲染。

实现流程：

• 注册自定义字体：将字体文件（如ttf、otf文件等）从应用资源注册到系统中，使得应用能够使用这些字体进行文本渲染。注册过程通常指将字体文件通过字体管理接口注册到系统字体库中，以便在应用中进行调用。
• 使用自定义字体：在应用中显式指定使用已注册的自定义字体进行文本渲染。开发者可以根据需要选择特定的文本样式（如常规、粗体、斜体等），并将其应用到UI元素、文本控件或其他文本展示区域，以确保符合设计要求并提供一致的视觉效果。

【解决方案】

开发步骤

1. 在工程中存放开发者自定义字体资源文件，字体资源文件可以放在resources/rawfile目录下也可以放在pages的同级目录，通过font.registerFont接口在生命周期aboutToAppear中进行自定义字体注册。关键代码如下：

aboutToAppear() {
  let font: Font = this.getUIContext().getFont()
  // 方式一：注册字魂龙腾楷书字体，familyName和familySrc都支持string
  font.registerFont({
    familyName: 'ZiHunLongTengKaiShu', // 注册的字体名称
    familySrc: '/font/ZiHunLongTengKaiShu(ShangYongXuShouQuan)-2.ttf' // font文件夹与pages目录同级
  })
  // 方式二：注册手写字体，familyName和familySrc都支持系统Resource
  font.registerFont({
    familyName: $r('app.string.font_name'), 
    familySrc: $r('app.string.font_src') // font文件夹与pages目录同级
  })
  // 方式三：注册ExtraLight字体, familySrc支持RawFile，确保将自定义字体文件放在entry/src/main/resources/rawfile目录下
  font.registerFont({
    familyName: 'SourceHanSerif-ExtraLight', 
    familySrc:  $rawfile('font/SourceHanSerif-ExtraLight.otf') // resources/rawfile目录下
  })
}

其中方式二需要在resources/base/element/string.json中定义font_name、font_src。代码如下：

{
  "string": [
    {
      "name": "font_name",
      "value": "HandwrittenFont"
    },
    {
      "name": "font_src",
      "value": "/font/AiNiZaiHuangHunRiLuoShouXieTi-2.ttf"
    }
  ]
}

说明：应用若需全局使用自定义字体，请在EntryAbility.ets文件的onWindowStageCreate生命周期中，通过windowStage.loadContent回调注册。

  2. 在文本组件中通过fontFamily属性使用自定义字体，关键代码如下：

  Text('字魂龙腾楷书')
    .align(Alignment.Center)
    .fontSize(50)
    .fontColor(Color.Blue)
    .fontFamily('ZiHunLongTengKaiShu') // 使用自定义魂龙腾楷书字体
  Text('手写字体')
    .align(Alignment.Center)
    .fontSize(50)
    .fontColor(Color.Blue)
    .fontFamily('HandwrittenFont') // 使用自定义手写字体

完整示例

import { Font } from '@kit.ArkUI';

@Entry
@Component
struct FontExample {
  @State message: string = 'Hello World';

  aboutToAppear() {
    let font: Font = this.getUIContext().getFont()
    // 注册青鸟华光简美黑字体
    font.registerFont({
      familyName: 'QingNiaoHuaGuangJianMeiHei', // 注册的字体名称
      familySrc: '/font/QingNiaoHuaGuangJianMeiHei-2.ttf' // font文件夹与pages目录同级
    })

    // 注册字魂龙腾楷书字体
    font.registerFont({
      familyName: 'ZiHunLongTengKaiShu', // 注册的字体名称
      familySrc: '/font/ZiHunLongTengKaiShu(ShangYongXuShouQuan)-2.ttf' // font文件夹与pages目录同级
    })

    // 注册手写字体
    font.registerFont({
      familyName: $r('app.string.font_name'), // 注册的字体名称
      familySrc: $r('app.string.font_src') // font文件夹与pages目录同级
    })

    // 注册ExtraLight字体
    font.registerFont({
      familyName: 'SourceHanSerif-ExtraLight', // 注册的字体名称
      familySrc:  $rawfile('font/SourceHanSerif-ExtraLight.otf') // resources/rawfile目录下
    })
  }

  build() {
    Column() {
      Text('青鸟华光简美黑')
        .align(Alignment.Center)
        .fontSize(50)
        .fontColor(Color.Blue)
        .fontFamily('QingNiaoHuaGuangJianMeiHei') // 使用青鸟华光简美黑字体
      Text('字魂龙腾楷书')
        .align(Alignment.Center)
        .fontSize(50)
        .fontColor(Color.Blue)
        .fontFamily('ZiHunLongTengKaiShu') // 使用魂龙腾楷书字体
      Text('手写字体')
        .align(Alignment.Center)
        .fontSize(50)
        .fontColor(Color.Blue)
        .fontFamily('HandwrittenFont') // 使用手写字体
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(50)
        .fontColor(Color.Blue)
        .fontFamily('SourceHanSerif-ExtraLight') // 使用注册字体SourceHanSerif-ExtraLight
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(50)
        .fontColor(Color.Blue)
    }
    .width('100%')
    .margin({ top: 30 })
  }
}

总的来说，HarmonyOS是一款非常优秀的操作系统，期待它能在未来带给我们更多惊喜！