Flutter部署Firebase Hosting时PDF字体加载触发DataView越界错误

这个错误是因为部署到Firebase Hosting后，TTF字体文件加载不完整或路径配置错误，导致pdf包解析字体时触发DataView越界异常。本地运行正常是因为资源加载路径和文件完整性有保障，部署后受Hosting配置、资源缓存或打包过程影响，字体数据无法正确读取。

解决步骤 #

1. 修正字体路径与pubspec配置 #

首先确认pubspec.yaml中字体资源配置正确，路径与实际文件结构一致：

flutter:
  assets:
    - fonts/Mulish/static/Mulish-Regular.ttf
    - fonts/Mulish/static/Mulish-Bold.ttf

执行flutter pub get确保资源被正确注册，部署前重新构建Web项目：flutter build web。

2. 修正字体变量对应错误（可选但重要） #

你的代码中把常规字体和粗体字体搞反了，虽然不是报错直接原因，但会导致字体样式异常：

// 原代码（错误）
final fontBold = Font.ttf(await rootBundle.load('fonts/Mulish/static/Mulish-Regular.ttf'));
final regFont = Font.ttf(await rootBundle.load('fonts/Mulish/static/Mulish-Bold.ttf'));

// 修正后
final fontBold = Font.ttf(await rootBundle.load('fonts/Mulish/static/Mulish-Bold.ttf'));
final regFont = Font.ttf(await rootBundle.load('fonts/Mulish/static/Mulish-Regular.ttf'));

3. 配置Firebase Hosting的字体响应头 #

在firebase.json中添加字体文件的Content-Type头，避免浏览器解析错误：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.ttf",
        "headers": [
          {
            "key": "Content-Type",
            "value": "font/ttf"
          }
        ]
      }
    ]
  }
}

4. 验证字体加载完整性 #

在代码中添加日志，检查部署后字体文件的加载长度是否与本地一致：

final regularFontData = await rootBundle.load('fonts/Mulish/static/Mulish-Regular.ttf');
print('Regular font length: ${regularFontData.lengthInBytes}');
final boldFontData = await rootBundle.load('fonts/Mulish/static/Mulish-Bold.ttf');
print('Bold font length: ${boldFontData.lengthInBytes}');

final fontBold = Font.ttf(boldFontData);
final regFont = Font.ttf(regularFontData);

如果部署后日志输出的长度比本地小，说明字体文件在部署过程中损坏或未正确上传，需要重新构建并部署：firebase deploy。

5. 尝试替换字体加载方式 #

如果rootBundle加载仍有问题，可尝试将字体文件转为Uint8List直接嵌入（适合小字体文件）：

// 先将字体文件转为base64字符串，再在代码中解码
const regularFontBase64 = '...'; // 本地执行dart代码生成base64
final regularFontBytes = base64Decode(regularFontBase64);
final regFont = Font.ttf(ByteData.view(regularFontBytes.buffer));

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