一般 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年07月08日 GitHub 标星已达 124K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

如果你是 Flutter 新手或者刚入门，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。

标签：常见问题,自定义,fonts,Alternate,字体,font,Flutter
来源： https://blog.csdn.net/qq_42351033/article/details/118582873