Flutter使用自定义字体

使用自定义字体

尽管 Android 和 iOS 已经提供了一套高质量系统字体，然而通常设计师还是会要求使用自定义字体。例如，你可能需要使用设计师提供的自定义字体，或者从 阿里巴巴字体库下载的字体。

这里还有另一个关于使用自定义字体的教程，如果你想要在多项目中重用一份字体的情况下，请参考 ​​将字体导出到 package​​。

Flutter 可以很方便的使用自定义字体，不仅能够将其用于整个应用里，还可以用在某个单独的 widget 中。请参照下面的步骤使用自定义字体：

步骤

1. 导入字体文件
2. 在​

   ​pubspec.yaml​

   ​ 中声明字体
3. 设置默认字体
4. 将字体用于特定 widget

1. 导入字体文件

要使用字体，你需要将字体文件导入到项目中。常见的做法是将字体文件放在项目根目录下的 ​

​fonts​

​ 或者 ​

​assets​

​ 文件夹中。

例如，如果你想要在项目中导入 Raleway 和 Roboto Mono 字体，文件夹结构会像下面这样：

awesome_app/
  fonts/
         

已支持的字体格式

Flutter 支持以下的字体格式：

• ​

  ​.ttc​

  ​
• ​

  ​.ttf​

  ​
• ​

  ​.otf​

  ​

2. 在 ​

​pubspec.yaml​

​ 中声明字体

现在你已经有一个字体可以使用，接下来则需要告诉 Flutter 它在哪。你可以在 ​

​pubspec.yaml​

​ 中像下面这样声明：

*content_copy*

fonts:
    - family: Alibaba
      fonts:
        - asset: fonts/Alibaba-PuHuiTi-Regular.ttf
        - asset: fonts/Alibaba-PuHuiTi-Medium.ttf
          style: italic      

​

​pubspec.yaml​

​ 选项的定义

​

​family​

​ 属性决定了字体的名称，你将会在 ​​TextStyle​​ 属性中用到。

​

​asset​

​ 是字体文件对于 ​

​pubspec.yaml​

​ 文件的相对路径。这些文件包含了字体中字形的轮廓。构建应用时，这些文件将会被包含在应用程序的资源包中。

单个字体可以引用多个不同轮廓字重及风格的文件：

• ​

  ​weight​

  ​ 属性指定了文件中字体轮廓的字重为 100 的整数倍，并且范围在 100 和 900 之间。这些值对应​​FontWeight​​ 属性上使用。例如，如果你想使用上面定义的​

  ​RobotoMono-Bold​

  ​ 字体，你可以在​

  ​TextStyle​

  ​ 中将​

  ​fontWeight​

  ​ 设置为​

  ​FontWeight.w700​

  ​。

需要注意的是，定义 ​

​weight​

​ 属性不会覆盖字体的实际粗细。你无法使用 ​

​FontWeight.w100​

​ 访问 ​

​RobotoMono-Bold​

​，即使其 ​

​weight​

​ 设置为了 100。

• ​

  ​style​

  ​ 属性指定文件中字体的轮廓是否为​

  ​italic​

  ​ 或​

  ​normal​

  ​。这些值对应​​FontStyle​​ 属性上使用。例如，如果你想使用上面定义的​

  ​Raleway-Italic​

  ​ 字体，你可以在​

  ​TextStyle​

  ​ 中将​

  ​fontStyle​

  ​ 设置为​

  ​FontStyle.italic​

  ​。

需要注意的是，定义 ​

​style​

​ 属性不会更改字体的实际样式；你无法使用 ​

​FontStyle.normal​

​ 访问 ​

​Raleway-Italic，即使其 ​

​style` 设置为了 normal。

3. 设置默认字体

关于如何应用这些字体，你有两种选择：将其设为默认字体，或者仅在某些特定 widget 中使用。

如果你想要设为默认字体，请将 ​

​fontFamily​

​ 设为应用（全局）​

​theme​

​ 的属性的一部分。提供的 ​

​fontFamily​

​ 的值必须与 ​

​pubspec.yaml​

​ 中声明的名称相匹配。

return MaterialApp(
 
  theme: ThemeData(fontFamily: 'Alibaba'),
  home: const MyHomePage(),
);      

有关主题的更多信息，请参阅文档： ​​使用 Themes 统一颜色和字体风格​​。

4. 将字体用于特定 Widget

如果你希望在特定 Widget（例如 ​

​Text​

​ Widget）中使用该字体，可以通过 ​​TextStyle​​ 中进行指定。

在这个例子中，我们将在一个 ​

​Text​

​ Widget 上使用 RobotoMono 字体。同样的，这里的 fontFamily 的值必须与 pubspec.yaml 中声明的值相匹配。

child: Text(
  'Alibaba sample',
  style: TextStyle(fontFamily: 'Alibaba'),
),      

字体样式

参考文档