Flutter中指定字体(全局或者局部，自有字库或第三方)

2020-08-15 本文已影响0人天上飘的是浮云

近期在使用Flutter跨平台技术开发公司新的App，现在Flutter也正在良性发展，网上也有很多技术型文章，在我的Flutter文集中，不会有很多阶段性或者啥进阶性的分享，只是时不时穿插一些自己工作中用到的，而网上又找不到，自己捣鼓出来的，我觉得这样会对需要的人更有帮助，不然网上的技术文章都会千篇一律。也是自己没时间，写写短文吧~

《Flutter的拨云见日》系列文章如下：
1、Flutter中指定字体(全局或者局部，自有字库或第三方)

一、全局或者局部添加自有字库

1、首先，下载字库

我们需要去字库网下载字库，如Flutter中文网提到的Google Fonts(需翻墙)，还有一些第三方的字库第三方字库(商用谨慎)，这类字库可能不免费有版权，使用到个人项目上没事，但是如果使用到商业项目上要特别小心，以防碰瓷！

下载的字体库文件类似**.ttf，只有就可以将其放在flutter工程目录下的asset(和lib同级，没有此目录自己新建)目录下的fonts中(在asset中新建fonts目录)，如图1.1：

图1.1

2、在pubspec.yaml文件中配置字库属性

在pubspec.yaml文件中配置：

  fonts:
    - family: Poppins
      fonts:
        - asset: lib/fonts/Poppins-Regular.ttf
        - asset: lib/fonts/Poppins-SemiBold.ttf
          weight: 700
  uses-material-design: true

family 是字体的名称, 你可以在TextStyle的 fontFamily 属性中使用.
asset 是相对于 pubspec.yaml 文件的路径.这些文件包含字体中字形的轮廓。在构建应用程序时，这些文件会包含在应用程序的asset包中。
可以给字体设置粗细、倾斜等样式

weight属性指定字体的粗细，取值范围是100到900之间的整百数(100的倍数). 这些值对应 FontWeight，可以用于 TextStyle的fontWeight属性
style 指定字体是倾斜还是正常，对应的值为italic和 normal. 这些值对应 FontStyle 可以用于TextStyle的 fontStyle TextStyle 属性
uses-material-design: true是指如果需要使用md风格的组件，一定要把uses-material-design设为true

3、使用自定义字体

3.1、局部使用自定义字体

TextStyle textStyle = TextStyle(fontFamily: 'Poppins',) ///在TextStyle中引用字体库family
Text('', style: textStyle); ///在Text中引用

3.2、全局使用自定义字体

MaterialApp(
     title: 'Test APP',
     theme: ThemeData(
     fontFamily: 'Poppins',
   )
)
///在根文件中的MaterialApp或者CupertinoApp中的theme主题
///中ThemeData的fontFamily属性中加入字体family

3.3、多处使用自定义字体当非全局使用

var textFontStyle  = TextStyle(
    fontFamily:"Poppins", // 指定该Text的字体。
)
 
///用到的地方用 .copyWith 这个方法, 如： 
Text(
    "996ICU",
    style: textFontStyle.copyWith(
        fontSize: 18.0,
        color: Colors.red,
        fontWeight: FontWeight.bold,
        ),
    )

二、全局或者局部添加第三方字库

1、在pubspec.yaml文件中引入第三方字库

  sms_fonts: ^1.0.0 ///假设有这么个第三方字体库

加入第三方字库后flutter pub get一下

2、局部使用第三方字库

TextStyle textStyle = TextStyle(
  fontFamily: 'Poppins',
  package: 'sms_fonts' ///第三方字库的package包名
) ///在TextStyle中引用第三方字体库family
Text('', style: textStyle); ///在Text中引用

3、全局使用第三方字库

这里估计是全文精华部分，因为我查阅资料或者看博客，前面讲的都差不多，直到这里我查不到资料了，很多文章也没说，都是讲的全局使用自定义字库，因为像TextStyle使用第三个字库有个package属性。可是
MaterialApp或者CupertinoApp却没有这个属性。
后面我去查了TextStyle源码，发现了新大陆~

fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
///查看TextStyle源码发现了这个，原来这个package也只是和fontFamily字符串组合，用于定位字体文件位置

这里我们就解决了如何全局使用第三方字体库了，(一般用于公司多个app，使用同一套字体库，自定义字体库package并发布到私有仓库情形)

MaterialApp(
     title: 'Test APP',
     theme: ThemeData(
     fontFamily: 'packages/sms-fonts/Poppins', ///只要将字体库引用改成该格式就可以了
   )
)

三、结语

这是我的第一篇Flutter杂文，感谢大家耐心看到这，后期还会不定期更新Flutter各种杂七杂八的玩意儿~^_

申明：禁用于商业用途，如若转载，请附带原文链接。https://www.jianshu.com/p/94ac0469f796蟹蟹~