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 Design 图标，因此可能会影响剩余的字体大小。）