用户把系统的字体大小调到了“特大”，你的应用一打开，列表里的文字截断了一大半，原本整整齐齐的卡片被撑得东倒西歪，按钮上的文字直接从中间折行，甚至底部的 TabBar 都被挤出了屏幕。这不是用户的错，是 UI 布局没抗住动态字体的冲击。

在 HarmonyOS 里，应用默认跟随系统的字体大小缩放。如果在写布局的时候用了一堆绝对数值（比如写死 height(50)），当字体放大时，文字需要更多的空间，容器装不下就会发生裁切或溢出。

用弹性布局代替死高度

解决字号适配的第一步，是改掉写死高度的习惯。用固定高度的 Row 和 Column 去包裹文本，一旦字号变大，内容必然溢出。尽量让容器的高度由内容撑开。

typescript

// 错误：固定高度导致大字号下被截断
Row() {
  Text('用户昵称').fontSize(16)
}
.height(40) // 高度写死

// 正确：使用 padding 和默认撑开
Row() {
  Text('用户昵称').fontSize(16)
}
.padding({ top: 10, bottom: 10 }) // 用内边距控制视觉高度

对于列表项（ListItem），尽量只用 padding 来控制间距，让列表项的高度根据内部文本的换行情况自动延展。这在大部分信息流展示场景中是安全的。

文本溢出与多行截断的处理

不是所有的文本都能无限延伸。比如单行的标题栏、固定宽度的标签，当字体放大时，必须限制行数并给出明确的截断提示。

typescript

Text('这是一个很长很长很长很长的商品标题，甚至超出了屏幕宽度')
  .fontSize(16)
  .maxLines(2)
  .textOverflow({ overflow: TextOverflow.Ellipsis })

maxLines(2) 限制了最多显示两行，TextOverflow.Ellipsis 保证超过两行的内容显示为省略号。如果不加这两个属性，文本在放大后可能会直接超出父容器边界，叠加到旁边的组件上，造成界面混乱。单行的 Text 最好加上 maxLines(1)，避免被强制折行。

监听系统字体缩放事件

有些复杂的图表或者自定义绘制的 Canvas，是无法用声明式布局自动撑开的。这时候需要监听系统配置的变化，拿到当前的字体缩放比例，然后在绘制代码中手动适配。

typescript

import { Configuration } from '@kit.AbilityKit'

// 在 Ability 的 onConfigurationUpdate 里监听
onConfigurationUpdate(newConfig: Configuration): void {
  if (newConfig.fontSizeScale) {
    this.fontScale = newConfig.fontSizeScale
    // 通知页面或 Canvas 重绘
  }
}

拿到 fontSizeScale 后，可以按比例放大画布内的字号或者重算画布的布局坐标。不要忘记在不需要该监听时取消，否则会一直消耗资源。

组件间距与最小触控区

字体放大后，组件之间的间距如果还是用固定值，视觉上会显得极其拥挤。尽量用百分比或者 Flex 布局的间距分配，让元素在空间变大时能合理分布。

另外，按钮的点击热区不要因为字体变大而缩水。虽然文字变大了，但按钮边缘的 padding 要保持甚至加大，确保用户的指尖能够轻松点到。如果使用了 Flex 布局，可以在文字变大时适当减小不必要的装饰性图片的尺寸，把空间让给文字。

不要只在开发机上用默认字号调试，真机上系统字体的缩放比例可以达到 1.5 倍甚至更高。测试时，必须进入“设置 -> 显示和亮度 -> 字体与显示大小”中，把字号调到最大，把所有页面过一遍。重点看列表页、表单页和底部导航栏，这三个地方是重灾区。如果发现文字被裁切，优先去查代码里有没有写死 .height() 和 .width()，把它们改成自适应的弹性布局，系统的适配机制自然就能生效。