前言
Flutter在运行web版时,加载完成字体之后,才会展示页面,巧合的是我的字体文件是4.8M,更巧合的是,我部署的服务器宽带只有1M,加载完成需要40秒,所以我想到了字体延迟加载,或者动态加载。
最终的解决思路就是:
web版 字体从uniCloud云存储获取,宽带比我部署的服务器快,还免费。(加载完成是500ms)
手机应用的字体,从 assets文件夹中获取即可(如果考虑到包体积,当然也可以远程加载)。
代码
var fontLoader = FontLoader("hk");
fontLoader.addFont(fetchFont());
await fontLoader.load();
Future<ByteData> fetchFont() async {
if (kIsWeb) {
var url = Uri.parse(
'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2243c45a-8403-4ee4-8a56-a7a20bd7f54e/66037e2d-c64e-4184-8143-50635f1dcc98.TTC');
final response = await get(url);
if (response.statusCode == 200) {
return ByteData.view(response.bodyBytes.buffer);
} else {
throw Exception('Failed to load font');
}
} else {
var bytes = await rootBundle.load("assets/fonts/hkktW5.TTC");
return bytes;
}
}
return MaterialApp( theme: ThemeData(fontFamily: "hk"));
后续优化的话,记得缓存,web加载一次之后,可以将 ByteData进行缓存。
如果手机应用不考虑网络的话,可以进行远程加载一次后,进行保存到本地。









网友评论