当前位置：首页 > article >正文

Flutter Web 中文字体显示异常问题

article 2025/1/9 18:43:56

flutter web 在中文使用粗体的时候发现了两个问题

一个字的笔画颜色不相同
带有 ‘口’的字这个口由于太粗出现了实体闭合的情况

解决方案

替换字体

对于这个问题解决的办法只有替换中文字体库，因为只有粗体才有问题，所以只需要添加粗体字体即可。我使用的阿里普惠字体。

遇到的问题

flutter 支持otf和ttf格式的字体，这两个的大小都在7-8M左右（中文字体都很大）, 当加入字体后，如果服务器性能一般，会严重影响网页的加载速度，直接加载肯定不合适。

提速方案

使用 font-spider 对 ttf 字体进行压缩，适配项目中出现的粗体字。把这个字体文件固定到 assets 中进行加载
为了适配其他网络字体，把 otf 文件（体积较小的）上传到cdn平台，提高下载速度，项目启动完成后进行异步下载，下载完成后使用 FontLoader 进行加载完整字体包。
为了防止字体下载失败，可以加入重试机制


import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;

class FontUtil {

  FontUtil._();

  static bool _isLoadSuccess = false;


  static int retryCount = 0;

  static void loadFontRes() async {
    if (_isLoadSuccess == true || retryCount > 3) {
      return;
    }

    try {
      final response = await http.get(Uri.parse("https://oss.static.cn/AlibabaPuHuiTi-3-85-Bold.otf"));
      if (response.statusCode != 200) {
        _onLoadFontError();
        return;
      }
      final bytes = response.bodyBytes.buffer.asByteData();
      final loader = FontLoader(AppFontFamily.AlibabaPuHuiTiAll)..addFont(Future.value(bytes));
      await loader.load();
      _isLoadSuccess = true;
      print("loadFontSuccess");
    } catch (e) {
      _onLoadFontError();
    }
  }

  static void _onLoadFontError() {
    Future.delayed(Duration(minutes: 1), () {
      retryCount++;
      print("load error, retry time $retryCount");
      FontUtil.loadFontRes();
    });
  }
  
  static String get aliFont => _isLoadSuccess ? AppFontFamily.AlibabaPuHuiTiAll : AppFontFamily.AlibabaPuHuiTi;
}