HarmonyOS鸿蒙Next中自定义字体如何使用及应用到全局

HarmonyOS鸿蒙Next中自定义字体如何使用及应用到全局

【问题现象】

遇到的问题:

  1. 自定义字体如何使用到全局
  2. 需要用到自定义字体的时候需要去组件一个一个写,没有效率,项目需要使用多种字体。

【背景知识】

ArkTS API:@ohos.font(注册自定义字体)

【解决方案】

自定义字体的应用可以分为注册和使用两步,问题1可以通过注册方式一+两种使用方式解决,问题2可以通过注册方式一+使用方式二解决。

  1. 注册方式一:在EntryAbility.ets文件,引入font,在onWindowStageCreate生命周期,windowStage.loadContent回调中注册字体:
import font from '@ohos.font';

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/registerFont', (err, data) => {
    if (err.code) {
      return;
    }
    font.registerFont({
      familyName: 'Beacon',
      familySrc: $rawfile('font/Beacon.otf')
    })
    font.registerFont({
      familyName: 'SF',
      familySrc: $rawfile('font/SF-Pro-Text-Italic.ttf')
    })
  })
}

注册方式二:registerFont.ets在页面中使用aboutToAppear方法注册字体familyName:

aboutToAppear() {
    font.registerFont({
      familyName: 'fontName',
      familySrc: $rawfile('font/medium.ttf')
    })
}
  1. 注册字体使用方法一:在相应需要使用的组件添加fontFamily:
@Entry
@Component
struct registerFont {
  @State message: string = 'test'

  build() {
    Column() {
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(50)
        .fontFamily('Beacon')
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(50)
        .fontFamily('SF')
    }.width('100%')
  }
}

注册字体使用方法二:在页面的aboutToAppear方法中通过setFont方法使用:

aboutToAppear() {
  getContext().getApplicationContext().setFont("fontName");
}

更多关于HarmonyOS鸿蒙Next中自定义字体如何使用及应用到全局的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中自定义字体如何使用及应用到全局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中,自定义字体的使用和全局应用可以通过以下步骤实现。

  1. 将自定义字体文件(如.ttf.otf格式)放置在项目的resources/font目录下。

  2. resources/base/element/font.json文件中定义字体资源,例如:

    {"name": "CustomFont", "src": "$media:CustomFont"}
    
  3. resources/base/profile/theme.json文件中配置全局字体,例如:

    {"attr": {"fontFamily": "CustomFont"}}
    

这样,自定义字体就会应用到整个应用的全局文本中。

如果需要为特定组件或页面设置不同的字体,可以在对应的布局文件中通过ohos:fontFamily属性指定。

回到顶部