包（库）中的字体未显示在 Flutter 应用程序中？答案

【问题标题】：Font from a package (library) not showing up in Flutter app?包（库）中的字体未显示在 Flutter 应用程序中？
【发布时间】：2020-03-01 08:03:50
【问题描述】：

我有一个名为 Handwriter 的包。它以自定义字体编写文本。我将 .ttf 保存在 lib/third_party/ 中。在其 pubspec.yaml 中，我添加了字体：

flutter:
    uses-material-design: true
    fonts:
     - family: FancyHandwriting
       fonts:
        - asset: lib/third_party/FancyHandwriting-Regular.ttf

我的应用导入了这个包。在其 pubspec.yaml 中，我将 Handwriter 添加为依赖项：

dependencies:
  flutter:
    sdk: flutter
  handwriter:
    path: ../handwriter
  model:
    path: ../model

但是，当我在我的应用程序中使用该字体时，它根本不显示。为什么？

final defaultStyle = TextStyle(
      fontFamily: 'FancyHandwriting',
      fontSize: 130);

【问题讨论】：

标签： flutter fonts package dart-packages

【解决方案1】：

要使用自定义包中的 Flutter Icon 字体，您可以按照以下步骤操作：

创建一个颤动的图标字体

你可以使用颤振图标https://www.fluttericon.com

将文件放入你的包中

确保将.ttf 文件复制到/lib 文件夹中。不仅仅是资产，就像您在根项目中所做的那样。

示例路径：

/packages/my_awesome_fontpackage/lib/assets/MyIconFont.ttf

（见https://zubairehman.medium.com/how-to-use-custom-fonts-images-in-flutter-package-c2d9d4bfd47a）

将字体添加到您的项目中

现在打开包的pubspec.yaml 文件并将字体添加为资产带有包路径：

flutter:
  fonts:
  - family:  MyIconFont
    fonts:
      - asset: packages/my_awesome_fontpackage/assets/MyIconFont.ttf

（您可能必须重新启动您的应用程序并完全绑定才能正确加载字体）

现在将包声明添加到字体 dart 文件中

进入 my_icon_font.dart 文件并将其中的常量 _kFontPkg 更改为您的包名称。


class MyIconFont {
  MyIconFont._();

  static const _kFontFam = 'MyIconFont';
  static const String? _kFontPkg = 'my_awesome_fontpackage';

  static const IconData bell = ...
  ....
}

【讨论】：

【解决方案2】：

无需在包消费者应用中重新添加字体，您可以使用：

final defaultStyle = TextStyle(
  fontFamily: 'FancyHandwriting',
  package: 'handwriter',
  fontSize: 130,
);

这也相当于做：

final defaultStyle = TextStyle(
  fontFamily: 'packages/handwriter/FancyHandwriting',
  fontSize: 130,
);

【讨论】：

【解决方案3】：

不要忘记，您还必须将字体导入/复制到您的字体资源目录中。在您的情况下，请确保将它们放在lib/third_party/ 中。（参见步骤 1 - https://flutter.dev/docs/cookbook/design/fonts）。

【讨论】：

【解决方案4】：

根据这个：https://flutter.dev/docs/cookbook/design/package-fonts 你必须在你的应用程序的 pubspec.yaml 中声明包的字体：

声明字体资源现在你已经导入了包，告诉 Flutter 在哪里可以找到 awesome_package 中的字体。

要声明包字体，请在字体路径前加上包/awesome_package。这告诉 Flutter 查看 lib 文件夹字体的包。

即：

dependencies:
  flutter:
    sdk: flutter
  handwriter:
    path: ../handwriter
  model:
    path: ../model

flutter:
    uses-material-design: true
    fonts:
     - family: FancyHandwriting
       fonts:
        - asset: packages/handwriter/third_party/FancyHandwriting-Regular.ttf

请注意，您将资产声明为来自包 - 您不必在应用的 lib 中复制它。

这背后的原因是并非每个包中的所有字体都可以使用，因此这会缩小最终应用的大小。

【讨论】：