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

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;
}