Flutter PWA与Web端Canvaskit模式下字体显示不一致如何解决？

这个问题的核心诱因是Canvaskit渲染层的字体兜底逻辑、PWA独立运行环境的系统字体访问限制、Service Worker缓存异常三者叠加导致，偶发正常、长时间运行后复现的特征完全匹配这类问题的表现，按以下步骤操作即可完全对齐两端字体效果：

1. 强制使用打包内置字体，完全禁用系统字体兜底 #

Canvaskit默认不会把Roboto字体全量打包到构建产物里，运行时会优先读取设备系统安装的无衬线字体做兜底：普通浏览器标签页有完整的系统字体读取权限，而PWA在独立窗口/standalone模式下，Windows、安卓定制ROM、iOS部分版本会拦截WebView对系统字体目录的访问，最终拿到的字体度量、字距参数和普通浏览器环境不一致，直接触发错位。

• 第一步在pubspec.yaml中显式引入完整Roboto字体依赖，不依赖框架默认的兜底逻辑：

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^6.1.0 # 内置完整Roboto字体资源

• 第二步在应用入口全局强制指定字体，禁止运行时fallback到系统字体：

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        fontFamily: 'Roboto',
        typography: Typography.material2021().apply(
          bodyColor: Colors.black,
          displayColor: Colors.black,
          fontFamilyFallback: ['Roboto'],
        ),
      ),
      home: const MyHomePage(),
    )
  );
}

• 第三步构建时加参数，强制把字体资源嵌入Canvaskit产物，禁止运行时动态拉取远程字体：
  flutter build web --web-renderer canvaskit --release --dart-define=FLUTTER_WEB_CANVASKIT_FORCE_EMBED_FONTS=true

2. 修正Service Worker缓存策略 #

字体偶发正常、使用一段时间后异常，基本是默认PWA Service Worker的缓存优先策略存了不完整的字体分片：

• 打开web/index.html中Service Worker注册逻辑，将所有.ttf、.woff2、.otf后缀的字体资源、canvaskit目录下的所有渲染相关资源，缓存策略调整为网络优先，缓存仅做离线兜底，不要用默认的缓存优先规则。
• 部署时同步更新Service Worker的版本号，强制客户端清理旧版本的异常缓存，避免坏缓存持续生效。

3. 禁用系统对PWA窗口的字体渲染覆盖 #

部分桌面端Chromium内核的PWA运行环境会默认开启系统级文本增强，覆盖网页本身的字距、抗锯齿设置：
在web/index.html的<head>标签内加入以下配置，强制PWA窗口和普通浏览器标签页使用完全一致的字体渲染规则：

<style>
  html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-feature-settings: "kern" 1;
  }
</style>
<meta name="mobile-web-app-capable" content="yes">

问题现象参考 #

左侧为PWA运行效果，右侧为普通浏览器访问Web端效果

两张截图以50%透明度叠加，可直观看到PWA端字距错位问题

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