目录

以 package 的方式使用字体

目录

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

步骤

#

  1. 将字体添加到 package

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

  3. 使用字体

1. 将字体添加到 package

#

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

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

awesome_package/
  lib/
    awesome_package.dart
    fonts/
      Raleway-Regular.ttf
      Raleway-Italic.ttf

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

#

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

将 package 添加到应用中

#

运行 flutter pub add 将 awesome_package 添加为依赖。

flutter pub add awesome_package

声明字体资源

#

现在已经导入了 package，你需要告之 Flutter 在 awesome_package 中的哪里可以找到字体文件。

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

yaml
flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: packages/awesome_package/fonts/Raleway-Regular.ttf
        - asset: packages/awesome_package/fonts/Raleway-Italic.ttf
          style: italic

3. 使用字体

#

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

dart
child: Text(
  'Using the Raleway font from the awesome_package',
  style: TextStyle(
    fontFamily: 'Raleway',
  ),
),

完整样例

#

字体

#

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

pubspec.yaml

#
yaml
name: package_fonts
description: An example of how to use package fonts with Flutter

dependencies:
  awesome_package:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: packages/awesome_package/fonts/Raleway-Regular.ttf
        - asset: packages/awesome_package/fonts/Raleway-Italic.ttf
          style: italic
  uses-material-design: true

main.dart

#
dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Package Fonts',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default font.
      appBar: AppBar(title: const Text('Package Fonts')),
      body: const Center(
        // This Text widget uses the Raleway font.
        child: Text(
          'Using the Raleway font from the awesome_package',
          style: TextStyle(
            fontFamily: 'Raleway',
          ),
        ),
      ),
    );
  }
}

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-07-03。 查看文档源码 或者 为本页面内容提出建议。