使用自定义字体

虽然 Android 和 iOS 提供高质量的系统字体，但设计师希望支持自定义字体。 您可能拥有设计师设计的自定义字体，或者从 Google Fonts 下载的字体。

字体族是构成给定字母风格的字形或形状的集合。 字体是字体族在给定粗细或变体中的一种表现形式。 Roboto 是一个字体族，Roboto Bold 是一个字体。

Flutter 允许您将自定义字体应用于整个应用程序或单个组件。 此配方创建一个使用自定义字体的应用程序，具体步骤如下。

1. 选择您的字体。
2. 导入字体文件。
3. 在 pubspec 中声明字体。
4. 将字体设置为默认字体。
5. 在特定组件中使用字体。

您无需按步骤操作。 该指南在最后提供了完整的示例文件。

您对字体的选择不仅仅是偏好。 考虑哪些文件格式与 Flutter 兼容，以及字体如何影响设计选项和应用程序性能。

Flutter 支持以下字体格式

• OpenType 字体集合：.ttc
• TrueType 字体：.ttf
• OpenType 字体：.otf

Flutter 不支持桌面平台上 Web Open Font Format 字体，.woff 和 .woff2。

很少有来源就字体文件类型是什么或哪种占用空间更小达成一致。 字体文件类型之间的关键区别在于该格式如何编码文件中的字形。 大多数 TrueType 和 OpenType 字体文件具有类似的功能，因为它们在格式和字体改进过程中相互借鉴。

您应该使用哪种字体取决于以下考虑因素。

• 您需要在应用程序中对字体进行多少变化？
• 您可以接受字体在应用程序中使用多少文件大小？
• 您需要在应用程序中支持多少种语言？

研究给定字体提供的选项，例如每个字体文件中的多个粗细或样式、可变字体功能、用于多个字体粗细的多个字体文件，或每个字体的多个宽度。

选择满足应用程序设计需求的字体族或字体系列。

要使用字体，请将其字体文件导入到您的 Flutter 项目中。

要导入字体文件，请执行以下步骤。

1. 如有必要，为了匹配本指南中的其余步骤，请将您的 Flutter 应用程序名称更改为 custom_fonts。

   $ mv /path/to/my_app /path/to/custom_fonts
   

   content_copy

2. 导航到您的 Flutter 项目的根目录。

   $ cd /path/to/custom_fonts
   

   content_copy

3. 在您的 Flutter 项目的根目录中创建一个 fonts 目录。

   $ mkdir fonts
   

   content_copy

4. 将字体文件移动或复制到 Flutter 项目根目录中的 fonts 或 assets 文件夹中。

   $ cp ~/Downloads/*.ttf ./fonts
   

   content_copy

生成的文件夹结构应如下所示

custom_fonts/
|- fonts/
  |- Raleway-Regular.ttf
  |- Raleway-Italic.ttf
  |- RobotoMono-Regular.ttf
  |- RobotoMono-Bold.ttf

下载字体后，在 pubspec.yaml 文件中包含字体定义。 此字体定义还指定应使用哪个字体文件来渲染应用程序中的给定粗细或样式。

要将字体文件添加到您的 Flutter 应用程序，请完成以下步骤。

1. 打开您的 Flutter 项目根目录中的 pubspec.yaml 文件。

   $ vi pubspec.yaml
   

   content_copy

2. 在 flutter 声明之后粘贴以下 YAML 块。

   yaml

     fonts:
       - family: Raleway
         fonts:
           - asset: fonts/Raleway-Regular.ttf
           - asset: fonts/Raleway-Italic.ttf
             style: italic
       - family: RobotoMono
         fonts:
           - asset: fonts/RobotoMono-Regular.ttf
           - asset: fonts/RobotoMono-Bold.ttf
             weight: 700
   

   content_copy

此 pubspec.yaml 文件将 Raleway 字体族的斜体样式定义为 Raleway-Italic.ttf 字体文件。 当您设置 style: TextStyle(fontStyle: FontStyle.italic) 时，Flutter 会将 Raleway-Regular 与 Raleway-Italic 互换。

family 值设置字体族的名称。 您在 fontFamily 属性的 TextStyle 对象中使用此名称。

asset 的值是 pubspec.yaml 文件到字体文件的相对路径。 这些文件包含字体中字形的轮廓。 构建应用程序时，Flutter 会将这些文件包含在应用程序的资源包中。

不同的字体族以不同的方式实现字体文件。 如果您需要具有多种字体粗细和样式的字体族，请选择并导入代表该变化的字体文件。

当您导入的字体文件不包含多个字体或可变字体功能时，请不要使用 style 或 weight 属性来调整其显示方式。 如果您在常规字体文件上使用这些属性，Flutter 会尝试模拟外观。 视觉效果将与使用正确的字体文件大不相同。

当您声明哪些字体文件代表字体的样式或粗细时，您可以应用 style 或 weight 属性。

weight 属性指定文件中轮廓的粗细，以 100 的整数倍表示，范围在 100 到 900 之间。 这些值对应于 FontWeight 并且可以用于 fontWeight 属性的 TextStyle 对象。

在本指南中显示的 pubspec.yaml 中，您将 RobotoMono-Bold 定义为字体族的 700 粗细。 要使用添加到应用程序中的 RobotoMono-Bold 字体，请在您的 TextStyle 组件中将 fontWeight 设置为 FontWeight.w700。

如果您没有将 RobotoMono-Bold 添加到您的应用程序中，Flutter 会尝试使字体看起来粗体。 文本可能看起来有点深色。

您无法使用 weight 属性来覆盖字体的粗细。 您无法将 RobotoMono-Bold 设置为任何其他粗细，例如 700。 如果您设置 TextStyle(fontFamily: 'RobotoMono', fontWeight: FontWeight.w900)，则显示的字体仍然会以 RobotoMono-Bold 看起来粗体的样子呈现。

style 属性指定字体文件中的字形是显示为 italic（斜体）还是 normal（正常）。 这些值对应于 FontStyle。 您可以在 fontStyle 属性的 TextStyle 对象中使用这些样式。

在本指南中显示的 pubspec.yaml 中，您将 Raleway-Italic 定义为 italic 样式。 要使用添加到应用程序中的 Raleway-Italic 字体，请设置 style: TextStyle(fontStyle: FontStyle.italic)。 Flutter 在渲染时会将 Raleway-Regular 与 Raleway-Italic 互换。

如果您没有将 Raleway-Italic 添加到您的应用程序中，Flutter 会尝试使字体看起来斜体。 文本可能看起来向右倾斜。

您无法使用 style 属性来覆盖字体的字形。 如果您设置 TextStyle(fontFamily: 'Raleway', fontStyle: FontStyle.normal)，则显示的字体仍然会以斜体呈现。 斜体字体的 regular 样式是斜体。

要将字体应用于文本，您可以将其设置为应用程序的默认字体，在 theme 中。

要将字体设置为默认字体，请在应用程序的 theme 中设置 fontFamily 属性。 将 fontFamily 值与在 pubspec.yaml 文件中声明的 family 名称匹配。

结果将类似于以下代码。

return MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'Raleway'),
  home: const MyHomePage(),
);

要了解有关主题的更多信息，请查看 使用主题共享颜色和字体样式 配方。

要将字体应用于特定的组件，例如 Text 组件，请为该组件提供 TextStyle。

在本指南中，尝试将 RobotoMono 字体应用于单个 Text 组件。 将 fontFamily 值与在 pubspec.yaml 文件中声明的 family 名称匹配。

结果将类似于以下代码。

child: Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
),

从 Google Fonts 下载 Raleway 和 RobotoMono 字体文件。

1. 打开您的 Flutter 项目根目录中的 pubspec.yaml 文件。

   $ vi pubspec.yaml
   

   content_copy

2. 将其内容替换为以下 YAML。

   yaml

   name: custom_fonts
   description: An example of how to use custom fonts with Flutter
   ​
   dependencies:
     flutter:
       sdk: flutter
   ​
   dev_dependencies:
     flutter_test:
       sdk: flutter
   ​
   flutter:
     fonts:
       - family: Raleway
         fonts:
           - asset: fonts/Raleway-Regular.ttf
           - asset: fonts/Raleway-Italic.ttf
             style: italic
       - family: RobotoMono
         fonts:
           - asset: fonts/RobotoMono-Regular.ttf
           - asset: fonts/RobotoMono-Bold.ttf
             weight: 700
     uses-material-design: true
   

   content_copy

1. 打开 Flutter 项目的 lib/ 目录中的 main.dart 文件。

   $ vi lib/main.dart
   

   content_copy

2. 将其内容替换为以下 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 MaterialApp(
         title: 'Custom Fonts',
         // Set Raleway as the default app font.
         theme: ThemeData(fontFamily: 'Raleway'),
         home: const MyHomePage(),
       );
     }
   }
   ​
   class MyHomePage extends StatelessWidget {
     const MyHomePage({super.key});
   ​
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         // The AppBar uses the app-default Raleway font.
         appBar: AppBar(title: const Text('Custom Fonts')),
         body: const Center(
           // This Text widget uses the RobotoMono font.
           child: Text(
             'Roboto Mono sample',
             style: TextStyle(fontFamily: 'RobotoMono'),
           ),
         ),
       );
     }
   }
   

   content_copy

生成的 Flutter 应用程序应显示以下屏幕。