Flutter Web中fontFamilyFallback功能失效问题反馈

问题描述 #

Flutter Web开发中，fontFamilyFallback功能未按预期工作：当指定的fontFamily不存在时，系统不会回退到fontFamilyFallback配置的字体，而是直接使用系统默认字体，该问题可稳定复现。

复现步骤 #

• 在Chrome调试模式下运行代码示例1（指定存在的Helvetica字体）
• 在Chrome调试模式下运行代码示例2（指定不存在的字体）

两个示例仅fontFamily参数不同：示例1设为"Helvetica"，示例2设为"Some font that doestn exist"。

预期结果 #

• 示例1：文本使用指定的Helvetica字体渲染
• 示例2：因指定字体不存在，自动使用fontFamilyFallback中的Palatino字体渲染

实际结果 #

• 示例1符合预期，正常显示Helvetica字体
• 示例2异常：文本显示系统默认字体（SF Pro），fontFamilyFallback配置被完全忽略

注：Palatino字体本身可正常使用，直接将其设为fontFamily时显示正常。

代码示例 #

代码示例1（正常场景） #

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Home(),
  ));
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: const [
        Text(
          "abcdefghijklmnopqrstuvwxyz\n- + 0123456789",
          style: TextStyle(
            fontFamily: 'Helvetica',
            fontFamilyFallback: [
              "Palatino",
            ],
          ),
        )
      ],
    );
  }
}

代码示例2（异常场景） #

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Home(),
  ));
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: const [
        Text(
          "abcdefghijklmnopqrstuvwxyz\n- + 0123456789",
          style: TextStyle(
            fontFamily: 'Some font that doestn exist',
            fontFamilyFallback: [
              "Palatino",
            ],
          ),
        )
      ],
    );
  }
}

环境日志 #

• flutter analyze：未发现任何问题（耗时1.4秒）
• flutter doctor -v输出：

[✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-arm, locale pt-BR)
    • Flutter version 3.0.4 at /Users/rafaelguimaraes/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 85684f9300 (6 weeks ago), 2022-06-30 13:22:47 -0700
    • Engine revision 6ba2af10bb
    • Dart version 2.17.5
    • DevTools version 2.12.2

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[!] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] VS Code (version 1.70.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 104.0.5112.79

[!] HTTP Host Availability
    ✗ HTTP host "https://cocoapods.org/" is not reachable. Reason: An error occurred while checking the HTTP host: Failed host lookup: 'cocoapods.org'
    ✗ HTTP host "https://maven.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host: Failed host lookup: 'maven.google.com'
    ✗ HTTP host "https://pub.dev/" is not reachable. Reason: An error occurred while checking the HTTP host: Failed host lookup: 'pub.dev'
    ✗ HTTP host "https://cloud.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host: Failed host lookup: 'cloud.google.com'

! Doctor found issues in 4 categories.

临时解决方案 #

由于fontFamilyFallback在Web端存在此bug，可通过手动检测字体是否存在，动态设置fontFamily来规避：

步骤1：在web/index.html中添加JS检测函数 #

function isFontAvailable(fontName) {
  const testElement = document.createElement('span');
  testElement.style.fontFamily = 'monospace';
  testElement.style.fontSize = '100px';
  testElement.innerHTML = 'abc';
  document.body.appendChild(testElement);
  const monoWidth = testElement.offsetWidth;
  
  testElement.style.fontFamily = `"${fontName}", monospace`;
  const testWidth = testElement.offsetWidth;
  
  document.body.removeChild(testElement);
  return monoWidth !== testWidth;
}

步骤2：在Dart代码中调用JS函数动态设置字体 #

import 'package:flutter/material.dart';
import 'dart:js' as js;

void main() {
  runApp(const MaterialApp(
    home: Home(),
  ));
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  bool isFontAvailable(String fontName) {
    return js.context.callMethod('isFontAvailable', [fontName]);
  }

  @override
  Widget build(BuildContext context) {
    const targetFont = 'Some font that doestn exist';
    final fontFamily = isFontAvailable(targetFont) ? targetFont : 'Palatino';
    
    return Column(
      children: [
        Text(
          "abcdefghijklmnopqrstuvwxyz\n- + 0123456789",
          style: TextStyle(
            fontFamily: fontFamily,
          ),
        )
      ],
    );
  }
}

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