自定义字体,除了可以把字体文件作为应用的一部分之外,还可以通过 package 的方式使用,这样有助于跨项目的字体共享,也可以更方便的发布到 Pub site

步骤

  • 将字体添加到 package

  • 将 package 和字体添加到应用

  • 使用字体

1. 将字体添加到 package

通过 package 的方式使用字体,需要将字体文件导入 package 项目的 lib 文件夹中。你既可以将字体文件直接放在 lib 文件夹中,也可以放在子目录中,例如 lib/fonts

在此示例中,假设你已有一个名为 awesome_package 的 library,其中包含了 lib/fonts 文件夹中的字体资源。

  1. awesome_package/
  2. lib/
  3. awesome_package.dart
  4. fonts/
  5. Raleway-Regular.ttf
  6. Raleway-Italic.ttf

2. 将 package 和字体添加到应用

现在你可以使用该 package 以及它提供的字体。我们来编辑 应用程序 根目录下的 pubspec.yaml 文件。

将 package 添加到项目中

  1. dependencies:
  2. awesome_package: <latest_version>

声明字体资源

现在已经导入了 package,你需要告诉 Flutter 在 awesome_package 中哪里可以找到字体。

要想声明 package 中的字体,必须在 packages/awesome_package 的路径前加上字体声明。这将会让 Flutter 检索到 lib package 的文件夹中的字体。

  1. flutter:
  2. fonts:
  3. - family: Raleway
  4. fonts:
  5. - asset: packages/awesome_package/fonts/Raleway-Regular.ttf
  6. - asset: packages/awesome_package/fonts/Raleway-Italic.ttf
  7. style: italic

3. 使用字体

你可以使用 TextStyle 来更改文本的外观。在使用 package 中的字体时,你不仅需要声明该文字所要使用的字体,还需要声明字体所属的 package

  1. Text(
  2. 'Using the Raleway font from the awesome_package',
  3. style: TextStyle(
  4. fontFamily: 'Raleway',
  5. package: 'awesome_package',
  6. ),
  7. );

一个完整的例子

字体

这里所使用的 Raleway 和 RobotoMono 字体都是从 Google Fonts 下载的 。

pubspec.yaml

  1. name: package_fonts
  2. description: An example of how to use package fonts with Flutter
  3. dependencies:
  4. awesome_package:
  5. flutter:
  6. sdk: flutter
  7. dev_dependencies:
  8. flutter_test:
  9. sdk: flutter
  10. flutter:
  11. fonts:
  12. - family: Raleway
  13. fonts:
  14. - asset: packages/awesome_package/fonts/Raleway-Regular.ttf
  15. - asset: packages/awesome_package/fonts/Raleway-Italic.ttf
  16. style: italic
  17. uses-material-design: true

main.dart

  1. import 'package:flutter/material.dart';
  2. void main() => runApp(MyApp());
  3. class MyApp extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. return MaterialApp(
  7. title: 'Package Fonts',
  8. home: MyHomePage(),
  9. );
  10. }
  11. }
  12. class MyHomePage extends StatelessWidget {
  13. @override
  14. Widget build(BuildContext context) {
  15. return Scaffold(
  16. // The AppBar uses the app-default Raleway font.
  17. appBar: AppBar(title: Text('Package Fonts')),
  18. body: Center(
  19. // This Text Widget uses the RobotoMono font.
  20. child: Text(
  21. 'Using the Raleway font from the awesome_package',
  22. style: TextStyle(
  23. fontFamily: 'Raleway',
  24. package: 'awesome_package',
  25. ),
  26. ),
  27. ),
  28. );
  29. }
  30. }

Package Fonts Demo