Flutter 使用自定义字体
使用自定义字体
尽管 Android 和 iOS 已经提供了一套高质量系统字体,然而通常设计师还是会要求使用自定义字体。例如,你可能需要使用设计师提供的自定义字体,或者从 阿里巴巴字体库下载的字体。
这里还有另一个关于使用自定义字体的教程,如果你想要在多项目中重用一份字体的情况下,请参考 将字体导出到 package。
Flutter 可以很方便的使用自定义字体,不仅能够将其用于整个应用里,还可以用在某个单独的 widget 中。请参照下面的步骤使用自定义字体:
步骤
导入字体文件
在
pubspec.yaml
中声明字体设置默认字体
将字体用于特定 widget
1. 导入字体文件
要使用字体,你需要将字体文件导入到项目中。常见的做法是将字体文件放在项目根目录下的 fonts
或者 assets
文件夹中。
例如,如果你想要在项目中导入 Raleway 和 Roboto Mono 字体,文件夹结构会像下面这样:
已支持的字体格式
Flutter 支持以下的字体格式:
.ttc
.ttf
.otf
2. 在 pubspec.yaml
中声明字体
现在你已经有一个字体可以使用,接下来则需要告诉 Flutter 它在哪。你可以在 pubspec.yaml
中像下面这样声明:
content_copy
pubspec.yaml
选项的定义
family
属性决定了字体的名称,你将会在 TextStyle
的 fontFamily
属性中用到。
asset
是字体文件对于 pubspec.yaml
文件的相对路径。这些文件包含了字体中字形的轮廓。构建应用时,这些文件将会被包含在应用程序的资源包中。
单个字体可以引用多个不同轮廓字重及风格的文件:
weight
属性指定了文件中字体轮廓的字重为 100 的整数倍,并且范围在 100 和 900 之间。这些值对应FontWeight
并能够在TextStyle
对象的fontWeight
属性上使用。例如,如果你想使用上面定义的RobotoMono-Bold
字体,你可以在TextStyle
中将fontWeight
设置为FontWeight.w700
。需要注意的是,定义
weight
属性不会覆盖字体的实际粗细。你无法使用FontWeight.w100
访问RobotoMono-Bold
,即使其weight
设置为了 100。style
属性指定文件中字体的轮廓是否为italic
或normal
。这些值对应FontStyle
并能够在TextStyle
对象的fontStyle
属性上使用。例如,如果你想使用上面定义的Raleway-Italic
字体,你可以在TextStyle
中将fontStyle
设置为FontStyle.italic
。需要注意的是,定义
style
属性不会更改字体的实际样式;你无法使用FontStyle.normal
访问Raleway-Italic,即使其
style` 设置为了 normal。
3. 设置默认字体
关于如何应用这些字体,你有两种选择:将其设为默认字体,或者仅在某些特定 widget 中使用。
如果你想要设为默认字体,请将 fontFamily
设为应用(全局)theme
的属性的一部分。提供的 fontFamily
的值必须与 pubspec.yaml
中声明的名称相匹配。
有关主题的更多信息,请参阅文档: 使用 Themes 统一颜色和字体风格。
4. 将字体用于特定 Widget
如果你希望在特定 Widget(例如 Text
Widget)中使用该字体,可以通过 TextStyle
中进行指定。
在这个例子中,我们将在一个 Text
Widget 上使用 RobotoMono 字体。同样的,这里的 fontFamily 的值必须与 pubspec.yaml 中声明的值相匹配。
字体样式
如若 TextStyle
指定的字体样式缺少相应的字体文件, Engine 则会使用一个更加通用的字体文件,并尝试推断所请求的字体 weight 和样式的轮廓。
参考文档
版权声明: 本文为 InfoQ 作者【坚果】的原创文章。
原文链接:【http://xie.infoq.cn/article/d5440ea1a279d9cba3b512a4f】。文章转载请联系作者。
评论