HarmonyOS鸿蒙Next中如何实现app级字体自定义fontFamily及关怀模式（app全局字体放大或缩小）

HarmonyOS鸿蒙Next中如何实现app级字体自定义fontFamily及关怀模式（app全局字体放大或缩小） 实现app级字体自定义fontFamily及关怀模式（app全局字体放大或缩小）

当前实现方案：

  1. EntryAblity的onWindowStageCreate中通过font.registerFont（）注册字体文件

  2. 自定义Text组件；添加text、fontWeight、fontSize、fontColor属性，每个属性都可能为一个动态值（可观察，属性值改变后Text要进行刷新）

  3. 通过PersistentStorage缓存关怀模式开关状态，动态设置fontSize大小从而实现关怀模式下字体放大与缩小。

自定义Text组件代码如下：

PersistentStorage.persistProp(CommonConstants.CARE_MODE_ENABLE_KEY,false)
@Component
export struct TextCare {
  @StorageLink(CommonConstants.CARE_MODE_ENABLE_KEY) careModeEnable:boolean = false
  text: ResourceStr = ""
  fontWeight: number = 400
  fontSize: number = 12
  @Prop fontColor:ResourceColor = '#000000'
  careModeApply:boolean = true

  aboutToAppear(): void {
    if(this.careModeEnable && this.careModeApply){
      this.fontSize = this.fontSize * 1.3
    }
  }

  build() {
    Text(this.text)
      .fontWeight(this.fontWeight)
      .fontFamily('SourceHan')
      .fontSize(this.fontSize)
      .fontColor(this.fontColor)
  }
}

调用方通过TextCare传入对应属性值，如果是动态属性需要使用@State标记后传入

调用示例代码：

@Component
struct TabItem {
  @ObjectLink tabBar: TabBarData
  onChange: (index: number) => void = () => {}
  [@State](/user/State) fontColor: Resource = $r("app.color.text_gray")
  @Prop icon: ResourceStr

  getFontColor(){
    this.fontColor = this.tabBar.active ? $r('app.color.text_red') : $r("app.color.text_gray")
    return this.fontColor
  }

  getIcon(){
    this.icon = this.tabBar.active ? this.tabBar.activeIcon : this.tabBar.defaultIcon
    return this.icon
  }

  build() {
    Column() {
      Image(this.getIcon())
        .size({ width: $r('app.float.tab_img_size'), height: $r('app.float.tab_img_size') })
      TextCare({
        text: this.tabBar.title,
        fontSize: 14,
        fontWeight: 500,
        fontColor: this.getFontColor(),
        careModeApply: false
      }).margin({ top: '5vp' })
    }
  }
}

使用上述方案，所有的调用方都需要单独提出需要动态修改的属性，并用@State标记字段传入自定义组件。这样使用不太方便，有无其他更好的解决方案。

比如不自定义组件，而是通过自定义组件的额外属性，并且这个属性是可以在全局app里面调用


更多关于HarmonyOS鸿蒙Next中如何实现app级字体自定义fontFamily及关怀模式（app全局字体放大或缩小）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

1、动态属性设置：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier-V5#attributemodifier

2、目前没有参数可以直接配置应用内所以对应组件的属性，通过动态属性设置，也可以实现应用内全局样式设置；

class MyTextModifier implements AttributeModifier<TextModifier> {
  fontSize: number = 16

  applyNormalAttribute(instance: TextModifier): void {

    instance.fontSize(this.fontSize)

  }
}

@Component
struct Page2 {
  @Prop functionTransfer: functionTransfer = new functionTransfer("", (num: number) => {
  })
  @State modifier: MyTextModifier = new MyTextModifier()

  build() {

    Text("123").onClick(() => {

      this.functionTransfer.fun(this.functionTransfer.str)

      // this.refreshPage("12")

    })

      .attributeModifier(this.modifier)

      .onClick(() => {

        this.modifier.fontSize++

      })

  }
}

更多关于HarmonyOS鸿蒙Next中如何实现app级字体自定义fontFamily及关怀模式（app全局字体放大或缩小）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现app级字体自定义fontFamily及关怀模式（全局字体放大或缩小）可以通过以下方式：

  1. 自定义fontFamily：

    • 在resources/base/element目录下的string.json文件中定义字体资源。
    • 使用ohos:fontFamily属性在XML布局文件中指定自定义字体。
    • 例如：
      {
  "name": "fontFamily",
  "value": "my_custom_font"
}
      在XML布局中：
      <Text ohos:fontFamily="$string:fontFamily" />

  2. 关怀模式（全局字体放大或缩小）：

    • 在config.json文件中配置accessibility属性，启用关怀模式。
    • 使用ohos:scale属性动态调整字体大小。
    • 例如：
      {
  "module": {
    "abilities": [
      {
        "accessibility": {
          "fontScale": true
        }
      }
    ]
  }
}
      在代码中动态调整字体大小：
      let config = this.getContext().getResourceManager().getConfiguration();
config.fontScale = 1.5; // 放大1.5倍
this.getContext().getResourceManager().updateConfiguration(config);

在HarmonyOS鸿蒙Next中，实现app级字体自定义fontFamily可以通过在config.json中配置"theme"字段，定义自定义字体资源路径，并在布局文件中引用。关怀模式（全局字体放大或缩小）可通过Configuration类动态调整系统字体大小，或使用TextSizeUtil工具类对应用内文本进行统一缩放。具体实现需结合系统API和自定义逻辑，确保用户体验一致性。

回到顶部