HarmonyOS 鸿蒙Next中调节系统字体大小后，如何解决界面错乱问题

HarmonyOS 鸿蒙Next中调节系统字体大小后，如何解决界面错乱问题

【问题现象】

更改了系统字体后，应用内的字体变化，界面发生错乱。

点击放大

【背景知识】

ArkUI为开发者提供4种像素单位，框架采用vp为基准数据单位。API 12release之前，应用默认会跟随系统字体变化而变化。

名称 描述
px 屏幕物理像素单位。
vp 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。**说明：**vp与px的比例与屏幕像素密度有关。
fp 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。
lpx 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

开发者设置的字体大小，默认为vp，当在设置中修改文字大小时，对应的数值会发生变化，字体像素(font pixel) 大小默认情况下与 vp 相同，即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在 vp 的基础上乘以用户设置的缩放系数，即 1 fp = 1 vp * 缩放系数。

【解决方案】

API 12release之前，应用默认会跟随系统字体变化而变化。API 12 release之后，应用默认不会跟随系统字体变化而变化。

  1. 部分控件设置文字固定大小：使用px为单位即可。
  2. 全局设置文字固定大小：

在开发视图的AppScop/resources/base/profile下面定义配置文件configuration.json，其中文件名"configuration"可自定义，需要和configuration标签指定的信息对应。配置文档查看。

点击放大

代码示例如下：

app.json5文件：

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

configuration文件：

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

修改后的效果如下：

点击放大

【总结】

设置文字不跟随系统文字大小变化，核心在于单位，如果设置为像素长度就不会有变化，或者全局关闭字体大小跟随。

注意

如果是API 12release，则应用默认不跟随系统字体大小变化，需要配置configuration配置项才能开启，开启这个的前提是进行适老化适配

附：屏幕像素密度几个单位之间的转换指导。


更多关于HarmonyOS 鸿蒙Next中调节系统字体大小后，如何解决界面错乱问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next中调节系统字体大小后，如何解决界面错乱问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，若调节系统字体大小后出现界面错乱问题，可通过以下方式解决：

  1. 部分控件设置文字固定大小：使用px为单位设置控件字体大小，避免跟随系统字体变化。
  2. 全局设置文字固定大小：在AppScop/resources/base/profile下定义configuration.json文件，配置fontSizeScale为followSystem，并设置fontSizeMaxScale限制最大缩放比例。

示例代码：

app.json5文件：

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

configuration文件：

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

通过上述配置，可控制应用字体不随系统字体变化，避免界面错乱。

回到顶部