Flutter应用中相同字号字体显示大小不一致问题求助

问题描述 #

所有文本元素均设置了相同的字体族和字号，仅字体粗细有区别。其中屏幕中间的文本“Sunny, What's on your mind?”指定字号为14，但显示尺寸明显大于其他同样设为14号的文本，已尝试直接设置字号为14，问题依旧。

可能原因 #

• 字体字重的视觉延展：部分字体在加粗（如FontWeight.bold）字重下，字符笔画会更粗，视觉上占用空间更大，即使字号相同，也会比常规字重的文本显得更大。
• textScaleFactor继承异常：Flutter的Text组件会继承父组件的textScaleFactor属性，如果该文本的父Widget设置了更高的缩放因子，会导致实际渲染尺寸被放大。
• 字体设计本身的差异：部分字体的不同字重版本，其基准em框设计存在细微差别，相同字号下渲染出的文本尺寸自然不一致。

解决办法 #

• 抵消字重的视觉放大：给粗体文本设置稍小的字号（比如13），或者用Transform.scale调整缩放比例：

  Transform.scale(
    scale: 0.9,
    child: Text(
      "Sunny, What's on your mind?",
      style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)
    )
  )
  

• 强制统一textScaleFactor：显式给该Text组件指定textScaleFactor: 1.0，切断父组件的缩放继承：

  Text(
    "Sunny, What's on your mind?",
    style: TextStyle(fontSize: 14),
    textScaleFactor: 1.0
  )
  

• 更换或调整字体：如果是字体设计问题，可更换为字重间尺寸更统一的字体；若有能力修改字体文件，可调整对应字重的em框参数。

内容的提问来源于stack exchange，提问作者Sunny Kothari