【Flutter 常见问题二十五】在 Flutter 中如何使用自定义的字体

2021/7/8 23:07:23

本文主要是介绍【Flutter 常见问题二十五】在 Flutter 中如何使用自定义的字体,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一般 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 博客中,希望自己学习的同时,也可以帮助更多的人。

Flutter跨平台开发交流群
在这里插入图片描述



这篇关于【Flutter 常见问题二十五】在 Flutter 中如何使用自定义的字体的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程