使用自定义字体

虽然 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

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

   cd /path/to/custom_fonts

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

   mkdir fonts

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

   cp ~/Downloads/*.ttf ./fonts

最终的文件夹结构应类似于以下内容

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

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

此 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

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

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

   vi lib/main.dart

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'),
           ),
         ),
       );
     }
   }

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