近期在使用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的 fontStyleTextStyle属性
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蟹蟹~
网友评论