自定义字体,除了可以把字体文件作为应用的一部分之外,还可以通过 package 的方式使用,这样有助于跨项目的字体共享,也可以更方便的发布到 Pub site。
步骤
将字体添加到 package
将 package 和字体添加到应用
使用字体
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 添加到项目中
dependencies:
awesome_package: <latest_version>
声明字体资源
现在已经导入了 package,你需要告诉 Flutter 在 awesome_package
中哪里可以找到字体。
要想声明 package 中的字体,必须在 packages/awesome_package
的路径前加上字体声明。这将会让 Flutter 检索到 lib
package 的文件夹中的字体。
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
。
Text(
'Using the Raleway font from the awesome_package',
style: TextStyle(
fontFamily: 'Raleway',
package: 'awesome_package',
),
);
一个完整的例子
字体
这里所使用的 Raleway 和 RobotoMono 字体都是从 Google Fonts 下载的 。
pubspec.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
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Package Fonts',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
// The AppBar uses the app-default Raleway font.
appBar: AppBar(title: Text('Package Fonts')),
body: Center(
// This Text Widget uses the RobotoMono font.
child: Text(
'Using the Raleway font from the awesome_package',
style: TextStyle(
fontFamily: 'Raleway',
package: 'awesome_package',
),
),
),
);
}
}
当前内容版权归 flutter-io.cn 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 flutter-io.cn .