Flutter Web FontAwesome 字体下载大小太大

Question

我注意到我使用 font_awesome_flutter 插件制作的 Flutter Web 项目因 font_size 下载而变慢。我只使用字体中的一个图标。有什么办法可以让这个变小吗？

这是来自webpagetest.org的数据：

Answer 1

从您的项目中删除 Font Awesome 插件

从 pubspec.yaml 以及您在项目中使用它的任何地方删除 font_awesome_flutter 插件。

生成只包含您需要的图标的字体

你可以只从字体中提取你需要的图标并丢弃其余的。最简单的方法是使用 IcoMoon 站点。例如，我使用该站点生成仅包含 Apple 徽标图标的字体。

记下代码 (eabe)。稍后你会用到它。

在 Flutter 中添加字体

您会得到相关说明 here。我称我的字体系列为 Apple.

在您的应用中使用图标

要使用您的图标，只需使用带有代码的文本小部件作为文本，并指定您在第 2 步中注册的字体系列。

FlatButton(
  child: Text(
    '\ueabe',
    style: TextStyle(fontFamily: 'Apple', fontSize: 24),
  ),
  onPressed: () {
    model.onApplePressed();
  },
),

这是它在应用中的样子：

检查尺码

重新构建您的 Flutter Web 应用程序并将其上线。

这里正在重新测试位于 webpagetest.org 的站点。

虽然没有我想象的那么小，但是字号肯定更好。 （该站点还使用 Material 设计图标，因此可能会影响剩余字体大小。）