背景
在之前的版本中，flutter 加载中文字体需要首先下载整个字体文件，再进行加载和显示。而中文字体动辄几mb甚至十几mb，这最终导致整个页面加载速度缓慢。
这里的问题在于，我们的网页并不需要总是使用到所有的文字，也就是说大部分下载的内容都是浪费的。
woff2 是什么？
WOFF2（Web Open Font Format 2）是一种现代的网页字体文件格式。它是在 WOFF 格式的基础上改进而来的，主要用于在网页上加载和显示字体。相比于传统的 TTF 或 OTF 文件，WOFF2 具有以下优点：
- 压缩率更高：WOFF2 使用了更先进的压缩技术，使得字体文件比 WOFF 更小，可以显著减少网页的加载时间。
- 更快的网页性能：由于文件更小，使用 WOFF2 的网页可以更快加载，特别是在移动设备和低带宽环境下表现更佳。
- 标准化支持：WOFF2 是由 W3C（万维网联盟）制定的标准，受主流浏览器的广泛支持，包括 Chrome、Firefox、Edge 和 Safari 等。
这种字体格式尤其适合中文等字符较多的语言，可以显著提高网页字体加载速度。
简单的说，它允许部分下载和加载，按需使用。
如何开启？
在不设置字体的默认情况下（noto sans sc），woff2 是自动生效的。
通过对比可见，虽然数量增加，但需要下载的字体文件显著减小。
更换 google font 域名
众所周知，google 服务在国内连接效果一直不稳定，对此我们有两种解决方案。一是自己部署字体文件。二是尝试更换域名，例如 fonts.gstatic.cn 或者 gstatic.loli.net。
这需要修改一下 index.html 和其中的 js 脚本具体需要参考官方文档 Flutter web app initialization | Flutter
但坑爹的是文档并没有写清楚如何更换字体下载域名，我找遍全网也没有找到相关文档。无奈之下只能自己翻源码，google 你长点心吧。最终代码如下
// web\flutter_bootstrap.js
{{flutter_js}}
{{flutter_build_config}}
const loading = document.createElement('div');
document.body.appendChild(loading);
loading.textContent = "Loading Entrypoint...长时间无响应请尝试更换网络";
_flutter.loader.load({
config: {
'canvasKitBaseUrl': '/canvaskit/',
},
serviceWorkerSettings: {
serviceWorkerVersion: {{flutter_service_worker_version}},
},
onEntrypointLoaded: async function (engineInitializer) {
loading.textContent = "Initializing engine...长时间无响应请尝试删除缓存或更换浏览器";
const appRunner = await engineInitializer.initializeEngine({
// *** 改这里的地址 ***
'fontFallbackBaseUrl': 'https://fonts.gstatic.cn/s/',
});
loading.textContent = "Running app...";
await appRunner.runApp();
},
});
总结
虽说是提升显著，但总归还是没有直接加载系统字体来得快，但据官方说，最快也要年底了。
