OpenHarmony修改系统文字大小方案

jshrjx

OpenHarmony修改系统文字大小方案

简介

调整系统文字大小不仅是技术功能，更是提升用户体验、保护健康、适配多样化需求的重要手段，通过灵活配置，用户能实现更高效、舒适、个性化的数字设备使用体验。为此OpenHarmony提供了部分接口来实现问题大小的调整功能。
环境准备

下载fullsdk (以5.0.0Release为例)：
https://cidownload.openharmony.cn/version/Master\_Version/OpenHarmony\_5.0.0.71/20250118\_060411/version-Master\_Version-OpenHarmony\_5.0.0.71-20250118\_060411-ohos-sdk-full-5.0.0-release.tar.gz
下载Deveco Studio (以5.0.0Release为例)：
https://developer.huawei.com/consumer/cn/download/deveco-studio (DevEco Studio 5.0.0 Release)
如何设置字体大小及粗细

导包

1. import { uiAppearance } from '@kit.ArkUI'

复制代码

调用setFontScale接口，设置默认字体大小为1

1. let fontScale = 1;
3. try {
5.   uiAppearance.setFontScale(fontScale).then(() => {
7.     console.info('OneFan Set fontScale successfully.');
9.   }).catch((error:Error) => {
11.     console.error('OneFan Set fontScale failed, ' + error.message);
13.   });
15. } catch (error) {
17.   let message = (error as BusinessError).message;
19.   console.error('OneFan Set fontScale failed, ' + message);
21. }

复制代码

调用setFontWeightScale接口，设置默认字体粗细为1

1. let fontWeightScale = 1;
4. try {
6.   uiAppearance.setFontWeightScale(fontWeightScale).then(() => {
8.     console.info('OneFan Set fontWeightScale successfully.');
10.   }).catch((error:Error) => {
12.     console.error('OneFan Set fontWeightScale failed, ' + error.message);
14.   });
16. } catch (error) {
18.   let message = (error as BusinessError).message;
20.   console.error('OneFan Set fontWeightScale failed, ' + message);
22. }

复制代码

配置点击事件调整 fontScale为1.45，fontWeightScale 为3

1. .onClick(() => {
3.   let fontScale = 1.45;
5.   try {
7.     uiAppearance.setFontScale(fontScale).then(() => {
9.       console.info('OneFan01 Set fontScale successfully.');
11.     }).catch((error:Error) => {
13.       console.error('OneFan Set fontScale failed, ' + error.message);
15.     });
17.   } catch (error) {
19.     let message = (error as BusinessError).message;
21.     console.error('OneFan01 Set fontScale failed, ' + message);
23.   }
27.   let fontWeightScale = 3;
29.   try {
31.     uiAppearance.setFontWeightScale(fontWeightScale).then(() => {
33.       console.info('OneFan01 Set fontWeightScale successfully.');
35.     }).catch((error:Error) => {
37.       console.error('OneFan01 Set fontWeightScale failed, ' + error.message);
39.     });
41.   } catch (error) {
43.     let message = (error as BusinessError).message;
45.     console.error('OneFan01 Set fontWeightScale failed, ' + message);
47.   }
49.   this.message = '字体大小调整为1.45倍，字体粗细为3倍'
51. })

复制代码

配置app.json5，增加configuration.json配置
在AppScope中的app.json5中配置

1. "configuration": "$profile:configuration"

复制代码

增加configuration.json配置文件
在AppScope/resources/base/profile中增加configuration.json文件，格式为：

1. {
3.   "configuration": {
5.     "fontSizeScale": "followSystem",
7.     "fontSizeMaxScale": "1.45"
9.   }
11. }

复制代码

其中fontSizeScale配置为followSystem则是跟随系统，fontSizeMaxScale为1.45则为设置的字体最大值。
增加权限配置
module.json5中增加以下权限配置：

1. ohos.permission.UPDATE_CONFIGURATION

复制代码

如何监听字体大小及粗细变化

在EntryAbility中监听配置变化监听

1. onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
3.   let envCallback: EnvironmentCallback = {
5.     onConfigurationUpdated(config) {
7.       console.info(`OneFan envCallback onConfigurationUpdated success: ${JSON.stringify(config)}`);
9.       let language = config.language;
11.       let colorMode = config.colorMode;
13.       let direction = config.direction;
15.       let screenDensity = config.screenDensity;
17.       let displayId = config.displayId;
19.       let hasPointerDevice = config.hasPointerDevice;
21.       let fontSizeScale = config.fontSizeScale;
23.       let fontWeightScale = config.fontWeightScale;
25.       let mcc = config.mcc;
27.       let mnc = config.mnc;
29.     },
31.     onMemoryLevel(level) {
33.       console.log(`OneFan onMemoryLevel level: ${level}`);
35.     }
37.   };
39.   try {
41.     let applicationContext = this.context.getApplicationContext();
43.     let callbackId = applicationContext.on('environment', envCallback);
45.     console.log(`OneFan callbackId: ${callbackId}`);
47.   } catch (paramError) {
49.     console.error(`OneFan error: ${(paramError as BusinessError).code}, ${(paramError as BusinessError).message}`);
51.   }
53. }

复制代码

其他各系统应用同样改造，需要参考配置变化监听及configuration.json配置。
效果图如下：

原始图

效果图：

其他应用原始图

其他应用效果图

Demo代码地址：

1.https://gitee.com/wanfan\_yyds/systemFoneSize