HarmonyOS 鸿蒙Next Web组件：H5页面字体如何跟随系统字体大小变化

涉及知识点：

1、configuration标签：用于指定描述应用字体大小跟随系统变更的配置文件

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/app-configuration-file-V5#configuration标签

2、订阅系统环境变量的变化：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/subscribe-system-environment-variable-changes-V13#在uiability组件中订阅回调

3、textZoomRatio(Web组件属性)：设置页面的文本缩放百分比，默认为100

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-web-V13#textzoomratio9

实现逻辑核心代码：

1、配置APP字体大小跟随系统（参考知识点1）

在AppScope/app.json5文件中添加"configuration": “$profile:configuration”

{
  "app": {
    "configuration": "$profile:configuration"  
  }
}

在开发视图的AppScope/resources/base/profile下面定义配置文件configuration.json

{
  "configuration": {
    "fontSizeScale": "followSystem",
    "fontSizeMaxScale": "3.2"
  }
}

2、订阅系统环境变量的变化（参考知识点2）

UIAbility组件提供了UIAbility.onConfigurationUpdate()回调方法用于订阅系统环境变量的变化。当系统环境变量发生变化时，会调用该回调方法。在该方法中，通过Configuration对象获取最新的系统环境配置信息，而无需重启UIAbility。

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    systemFontSize = this.context.config.fontSizeScale; // UIAbility实例首次加载时，系统当前字体大小
    AppStorage.setOrCreate('systemFontSize', systemFontSize); // 保存systemFontSize
  }
onConfigurationUpdate(newConfig: Configuration): void { // import { Configuration } from '[@kit](/user/kit).AbilityKit'; 否则该方法不生效
    hilog.info(DOMAIN_NUMBER, TAG,
      `onConfigurationUpdated systemFontSize is ${systemFontSize}, newConfig: ${JSON.stringify(newConfig)}`);

    if (systemFontSize !== newConfig.fontSizeScale) {
      hilog.info(DOMAIN_NUMBER, TAG, `systemFontSize from ${systemFontSize} changed to ${newConfig.fontSizeScale}`);
      systemFontSize = newConfig.fontSizeScale; // 将变化之后的字体大小保存，作为下一次变化前的字体大小
      AppStorage.setOrCreate('systemFontSize', systemFontSize); // 保存systemFontSize
    }
  }

3、Web组件配置textZoomRatio属性值

import { webview } from '[@kit](/user/kit).ArkWeb';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebTextRatio {
  private controller: webview.WebviewController = new webview.WebviewController();
  [@StorageProp](/user/StorageProp)("systemFontSize") fontSizeScale: number = 100

  build() {
    Column() {
      Text("系统字体大小比例：" + this.fontSizeScale)
      Web({ src: $rawfile('webRatio.html'), controller: this.controller })
        .domStorageAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .textZoomRatio(this.fontSizeScale * 100) // 设置页面的文本缩放百分比，默认为100
    }
    .height('100%')
    .width('100%')
  }
}