Flutter开发中iOS与Android设备字体显示大小差异如何修复

• iOS系统文本缩放系数影响：Flutter的Text组件默认会读取MediaQueryData.textScaleFactor对设置的字体大小做缩放，如果两台设备的系统字体缩放设置不一致，就算代码里设置了相同的fontSize，最终渲染的大小也会不同，出现差异的iPhone大概率是开启了系统级别的字体放大。
• 字体加载不一致：你全局配置了GoogleFonts.ralewayTextTheme()，如果iOS端没有正确加载Raleway字体，会自动 fallback 到系统默认字体，不同字体的默认行高、字重、字符宽度差异也会导致视觉上的显示效果不一样。

1. 强制统一文本缩放系数（最直接解决大小不一致问题） #

在GetMaterialApp的builder参数里全局设置固定的textScaleFactor，就不会跟随系统设置变化：

GetMaterialApp(
      title: L.localize('Wetip'),
      debugShowCheckedModeBanner: false,
      navigatorKey: navigatorKey,
      theme: ThemeData(
        primarySwatch:
            PaletteGenerator.generateMaterialColor(MyTheme.PrimaryColor),
        primaryColor: MyTheme.PrimaryColor,
        accentColor: MyTheme.SecondaryColor,
        textTheme: GoogleFonts.ralewayTextTheme(),
        disabledColor: Colors.grey.withOpacity(0.5),
        errorColor: MyTheme.PrimaryColor,
        visualDensity: VisualDensity.adaptivePlatformDensity
      ),
      // 新增这段builder配置固定缩放系数
      builder: (context, child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(
            // 固定为1不跟随系统缩放，也可根据需求设置统一的缩放值
            textScaleFactor: 1.0
          ),
          child: child!,
        );
      },
      home: MyApp())

如果不需要全局生效，也可以单独给Text、TextFormField组件加textScaleFactor: 1.0参数。

2. 确认Raleway字体在iOS端正常加载 #

检查pubspec.yaml是否正确配置了GoogleFonts相关资源：如果是离线打包字体的方案，要确认Raleway所有字重的字体文件都已导入资源目录，且在pubspec.yaml的flutter/fonts节点完成声明；如果是google_fonts包的在线加载方案，要确认iOS端网络权限已开启，首次启动可以正常下载字体文件。

3. 统一文本样式的全量属性 #

你当前的自定义TitleSection组件只复用了主题的fontSize，其余属性走平台默认值，容易出现差异，建议直接复用完整的主题样式：

Widget TitleSection(String text, {color = Colors.white, TextStyle? style}) {
  final defaultStyle = Theme.of(navigatorKey.currentContext!).textTheme.headline4?.copyWith(color: color);
  return Text(
    text,
    textAlign: TextAlign.center,
    textScaleFactor: 1.0,
    style: style ?? defaultStyle,
  );
}

同时给TextFormField也加上缩放配置保证一致性：

TextFormField(
      textScaleFactor: 1.0,
      style: TextStyle(
        fontSize: 16,
        color: colorText != null ? colorText : Colors.black,
        decorationColor: Colors.black),

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