【Flutter 问题系列第 25 篇】Flutter 使用自定义字体

这是【Flutter 问题系列第 25 篇】，如果觉得有用的话，欢迎关注专栏。

一般 App 为了文本能更好的显示，都会支持多种字体，在 Flutter 如何使用自定义的字体呢 ？

一：下载字体

如果你本地已经有自己喜欢的字体，可以直接看步骤二。

如果没有合适的字体，这里推荐两个可以免费使用的字体网站：优优教程网 、字体天下。

二：配置字体

一般我们会在 assets 文件夹下新建一个 font 的文件夹，然后把字体拖动到 font 文件夹中，如下图所示 然后在 pubspec.yaml 配置文件中新添加如下内容

flutter:

  fonts:
    - family: DIN Alternate
      fonts:
        - asset: assets/font/DIN Alternate Bold.ttf

    - family: hand
      fonts:
        - asset: assets/font/手书体.ttf

其中，family 代表字体的名称，这个你可以随便起，方便记忆就行，asset 代表字体的路径。

可以看到，每新增加一种字体，只需按照上面的格式写就行。

需要特别说明的是：一定要注意书写的格式，在 - 和 : 后面都有一个空格，否则会编译不通过。

三：使用字体

在 Text 组件 中可以通过设置 fontFamily 属性来修改字体，只需要把指定好的字体名称当作参数传入即可，如下代码所示

Text(
  "3.1415926",
  style: TextStyle(fontSize: 24, fontFamily: "DIN Alternate"),
),

最终的显示效果如下图所示

此外，在引入字体的时候要注意字体本身的大小，一般字体大小在几 kb 到几十兆之间，不能因为引入了字体后，导致包体积大了很多。

至此，关于在 Flutter 中如何使用自定义的字体便介绍完毕。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 Google 的 Flutter 越来越火，截止 2021年7月8日 GitHub 标星已达 124K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。