Skip to main content
Contents

从包中导出字体

Contents

与其将字体声明为应用的一部分，不如将其声明为单独的包的一部分。这是一种方便的方法，可以跨多个不同的项目共享相同的字体，或者供程序员将其包发布到pub.dev。此方法使用以下步骤：

  1. 将字体添加到包中。
  2. 将包和字体添加到应用中。
  3. 使用字体。

1. 将字体添加到包中

#

要从包中导出字体，需要将字体文件导入包项目的 lib 文件夹。您可以将字体文件直接放在 lib 文件夹中，也可以放在子目录中，例如 lib/fonts。

在此示例中，假设您有一个名为 awesome_package 的 Flutter 库，其字体位于 lib/fonts 文件夹中。

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

2. 将包和字体添加到应用中

#

现在，您可以通过更新应用根目录中的 pubspec.yaml 来使用包中的字体。

将包添加到应用中

#

要将 awesome_package 包添加为依赖项，请运行 flutter pub add：

flutter pub add awesome_package

声明字体资源

#

现在您已经导入了包，请告诉 Flutter 在哪里可以找到 awesome_package 中的字体。

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

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 来更改文本的外观。要使用包字体，请声明要使用的字体以及字体所属的包。

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: 一个关于如何在 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(
      // AppBar 使用应用默认字体。
      appBar: AppBar(title: const Text('Package Fonts')),
      body: const Center(
        // 此 Text 小部件使用 Raleway 字体。
        child: Text(
          'Using the Raleway font from the awesome_package',
          style: TextStyle(
            fontFamily: 'Raleway',
          ),
        ),
      ),
    );
  }
}

Package Fonts Demo

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。