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

  近期在使用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 是字体的名称, 你可以在TextStylefontFamily 属性中使用.
asset 是相对于 pubspec.yaml 文件的路径.这些文件包含字体中字形的轮廓。在构建应用程序时,这些文件会包含在应用程序的asset包中。
可以给字体设置粗细、倾斜等样式

  • weight属性指定字体的粗细,取值范围是100到900之间的整百数(100的倍数). 这些值对应 FontWeight, 可以用于 TextStylefontWeight属性
  • style 指定字体是倾斜还是正常,对应的值为italicnormal. 这些值对应 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蟹蟹~

你可能感兴趣的:(Flutter中指定字体(全局或者局部,自有字库或第三方))