Flutter黄金测试中垂直蒙古文字体渲染验证问题排查

这个问题我之前帮不少开发者排查过，核心原因是黄金测试的孤立环境不会自动加载你项目里的自定义蒙古文字体——模拟器能正常显示是因为它会读取设备或项目已初始化的字体资源，但测试框架在跑用例时是独立启动的，字体没被正确加载，就会用默认的“豆腐块”替代缺失的字符。

下面是一步步的解决方案：

1. 先确认pubspec.yaml的字体配置正确 #

这是基础前提，确保你已经在项目的pubspec.yaml里正确声明了蒙古文字体：

flutter:
  fonts:
    - family: MongolianFont  # 这个名称要和后续测试里的一致
      fonts:
        - asset: fonts/MongolianFont.ttf  # 字体文件的实际路径

2. 在测试代码中手动加载字体 #

Flutter测试框架提供了FontLoader类，可以在测试开始前手动加载字体资源。修改你的测试代码，在pumpWidget之前添加字体加载逻辑：

testWidgets('MongolText renders font', (WidgetTester tester) async {
  // 手动加载自定义蒙古文字体
  await tester.runAsync(() async {
    final fontLoader = FontLoader('MongolianFont')
      ..addFont(File('fonts/MongolianFont.ttf').readAsBytes());
    await fontLoader.load();
  });

  await tester.pumpWidget(
    MaterialApp(
      home: Scaffold(
        appBar: const AppBar(title: Text('My App')),
        body: Stack(
          children: <Widget>[
            Center(
              // 明确指定字体（避免组件默认使用系统字体）
              child: MongolText(
                'ᠮᠣᠩᠭᠣᠯ',
                style: const TextStyle(fontFamily: 'MongolianFont'),
              ),
            ),
          ],
        ),
      ),
    ),
  );
  await tester.pumpAndSettle();
  await expectLater(
    find.byType(MaterialApp),
    matchesGoldenFile('golden-file.png'),
  );
});

这里要注意两个关键点：

• FontLoader的family名称必须和pubspec.yaml里的family字段完全一致
• 字体文件的路径要和项目中的实际位置对应，相对路径是从项目根目录开始的

3. 处理特殊场景的额外配置 #

如果是在CI环境（比如GitHub Actions、GitLab CI）跑测试，可能还需要：

• 在CI环境中安装系统级的蒙古文字体（比如通过apt-get、brew等命令）
• 先在本地用flutter test --update-goldens生成正确的黄金文件，再提交到代码仓库，避免CI环境因字体差异生成错误的快照

4. 验证修复效果 #

运行测试前，先删除之前生成的错误黄金文件，然后执行测试：

flutter test

如果字体加载成功，黄金测试生成的图片应该会正确显示蒙古文字符，而不是豆腐块。

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