写点什么

Flutter 使用自定义字体

作者:坚果
  • 2022 年 6 月 03 日
  • 本文字数:1525 字

    阅读完需:约 5 分钟

使用自定义字体

尽管 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 属性决定了字体的名称,你将会在 TextStylefontFamily 属性中用到。


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


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


  • weight 属性指定了文件中字体轮廓的字重为 100 的整数倍,并且范围在 100 和 900 之间。这些值对应 FontWeight 并能够在 TextStyle 对象的 fontWeight 属性上使用。例如,如果你想使用上面定义的 RobotoMono-Bold 字体,你可以在 TextStyle 中将 fontWeight 设置为 FontWeight.w700

  • 需要注意的是,定义 weight 属性不会覆盖字体的实际粗细。你无法使用 FontWeight.w100 访问 RobotoMono-Bold,即使其 weight 设置为了 100。

  • style 属性指定文件中字体的轮廓是否为 italicnormal。这些值对应 FontStyle 并能够在 TextStyle 对象的 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'),),
复制代码

字体样式

如若 TextStyle 指定的字体样式缺少相应的字体文件, Engine 则会使用一个更加通用的字体文件,并尝试推断所请求的字体 weight 和样式的轮廓。

参考文档

https://docs.flutter.dev/cookbook/design/fonts

发布于: 刚刚阅读数: 3
用户头像

坚果

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“大前端之旅”,华为云享专家,InfoQ签约作者,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论

发布
暂无评论
Flutter使用自定义字体_6月月更_坚果_InfoQ写作社区