Flutter 设置全局字体的实现
作者:BennuCTech 发布时间:2023-05-04 06:27:25
引入字体
首先在项目中创建fonts目录,然后将将ttf文件放到该目录下,然后在pubspec文件中添加该字体文件,如:
...
flutter:
fonts:
- family: PingFang
fonts:
- asset: fonts/PingFang-Regular.ttf
assets:
- assets/exit_icon.png
这里family是我们自定义的,对应该字体,这里每个字体可以对应多个ttf文件,比如区分加粗:
flutter:
fonts:
- family: Raleway
fonts:
- asset: assets/fonts/Raleway-Regular.ttf
- asset: assets/fonts/Raleway-Medium.ttf
weight: 500
- asset: assets/fonts/Raleway-SemiBold.ttf
weight: 600
- family: AbrilFatface
fonts:
- asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf
family 是字体的名称, 你可以在TextStyle的 fontFamily 属性中使用.
asset 是相对于 pubspec.yaml 文件的路径.这些文件包含字体中字形的轮廓。在构建应用程序时,这些文件会包含在应用程序的asset包中。
可以给字体设置粗细、倾斜等样式
weight属性指定字体的粗细,取值范围是100到900之间的整百数(100的倍数). 这些值对应 FontWeight, 可以用于 TextStyle的fontWeight属性
style 指定字体是倾斜还是正常,对应的值为italic和 normal. 这些值对应 FontStyle 可以用于TextStyle的 fontStyle TextStyle 属性
引入字体后可以在Text的sytle中使用即可
Text(
"test",
style: TextStyle(fontFamily: "Rock Salt",),
)
全局字体
想设置全局字体,则需要在App中设置,如下:
MaterialApp(
title: title,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.comfortable,
fontFamily: "PingFang",
textTheme: TextTheme(
...
)
),
...
);
这样全局字体都变成了我们设定的字体。
问题
但是这里有两个小问题(flutter web,其他平台未测):
library中设置失效
我们将基础功能封装到一个library(gitsubmodule形式,所以没有发布)中,其实承载MaterialApp的BaseApp也在library中,所以最开始将字体文件放在了library中,然后在BaseApp的MaterialApp中设置了fontFamily。
但是运行发现字体根本没变化,通过flutter build web编译后发现在build目录下生成的文件中没有这个字体文件。
目前未找到原因,不过有解决方法,简单的解决方法就是在主工程中也放一份该字体文件,同时在主工程的pubspec中也添加该字体(名称与library中保持一致)。这样运行就会发现字体都变过来了,build编译后也生成了该字体文件。
TextSpan中字体未生效
TextSpan可以用来处理图文混合的需求。比如前面一个图片标签,后面是文字,但是文字第二行还要从图片最左端开始,即环绕图片,这种时候就需要TextSpan+WidgetSpan配合只用即可。
但是在flutter web中(其他平台未测),通过上面设置全局字体后,发现TextSpan中的字体并未生效,还是系统字体。
说明TextSpan稍微特殊一些,我们知道Text的源码中style实际上做了一步merge操作,merge了默认的style(defaultTextStyle)。但是在TextSpan的源码中,发现并没有这一步操作,所以设置的全局字体对它不起作用。
所以使用TextSpan的地方如果需要则必须单独设置字体。
来源:https://juejin.cn/post/7064049226556112933


猜你喜欢
- 在网上虽然看到了方法,但是处理感觉很复杂,我的办法,老实说,是突然试一下试到的,哈哈QWQOK,开始说明如何整的。效果如上图所示代码如下pa
- CircleImageView实现圆形头像代码分享,供大家参考,具体内容如下一、创建属性文件(attrs.xml)具体操作:1、在项目的va
- 前言最近,在给项目组使用Spring搭建Java项目基础框架时,发现使用Spring提供的BeanPostProcessor可以很简单方便地
- 研发背景公司安全部目前针对内部系统的网络访问日志的安全审计,大部分都是T+1时效,每日当天,启动Python编写的定时任务,完成昨日的日志审
- 让我们来看看这段代码: import java.util.BitSet;import java.util.concurrent.C
- 一,二分法检索算法介绍二分法检索(binary search)又称折半检索,二分法检索的基本思想是设字典中的元素从小到大有序地存放在数组(a
- @RequestBody搭配@Data的坑如果用@Data修饰实体类,里面的属性最好不要用连续几个相同字母,如果用千万别用大写。比如下面这个
- 现在视频应用越来越火,Periscope火起来后,国内也出现了不少跟风者,界面几乎跟Periscope一模一样.Periscope确实不错,
- 引言这里实现一个简单的图片上传功能,主要是熟悉这个文件上传的交互流程。关于更复杂的文件上传,如大文件的切片上传、断点续传等,这里不做过多介绍
- 本文实例为大家分享了unity实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下首先创建一个头部,编写脚本利用WASD控制头部的移动。Vec
- 我记得最开始接触多进程,多线程这一块的时候我不是怎么理解,为什么要有多线程啊?多线程到底是个什么鬼啊?我一个程序好好的就可以运行为什么要用到
- 本文实例讲述了C#中的事务用法。分享给大家供大家参考。具体如下:直接用SQL语句创建事务, 当然不是什么稀奇事了, 好是好, 只是麻烦.看看
- 先写在前面,这说的Settings加载选项是指Settings这个应用显示在主界面的选项,这个修改需要对系统源码进行修改。Android 7
- 本文实例为大家分享了Java实现24点小游戏的具体代码,供大家参考,具体内容如下程序设计要求:24点游戏是经典的纸牌益智游戏。常见游戏规则:
- 手机号登录在现在的项目中用的场景非常多,实现起来也不难,今天我们就一起来通过演示实现登录过程。 一、首先需要注册个第三方的账户,比
- 本文为大家分享了Unity实现粒子光效导出成png序列帧的具体代码,供大家参考,具体内容如下这个功能并不是很实用,不过美术同学有这样的需求,
- WPF实现滚动条还是比较方便的,只要在控件外围加上ScrollViewer即可,但美中不足的是:滚动的时候没有动画效果。在滚动的时候添加过渡
- Q1: Object类型包含哪些方法?A1: Object类型共包含6个方法,Equals, GetHashCode, ToString,
- 本文实例讲述了Android数据库中事务操作方法之银行转账功能。分享给大家供大家参考,具体如下:主javapackage com.ithei
- 本文实例讲述了本文章介绍了在c#,vb.net,sql中来判断指定日期是否为闰年的方法。分享给大家供大家参考。具体实现方法如下:C#代码如下