【问题标题】:Flutter Web FontAwesome fonts download size too bigFlutter Web FontAwesome 字体下载太大
【发布时间】:2020-07-24 03:11:28
【问题描述】:

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

这是来自webpagetest.org的数据:

【问题讨论】:

    标签: flutter fonts font-awesome flutter-web


    【解决方案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 图标,因此可能会影响剩余的字体大小。)

    【讨论】:

      猜你喜欢
      • 2015-09-09
      • 2021-03-27
      • 2016-05-14
      • 2014-07-02
      • 1970-01-01
      • 1970-01-01
      • 2012-04-06
      • 2022-08-08
      • 2020-05-10
      相关资源
      最近更新 更多