Flutter 设置全局字体的实现

目录
  • 引入字体
  • 全局字体
  • 问题
    • library中设置失效
    • TextSpan中字体未生效

引入字体

首先在项目中创建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的地方如果需要则必须单独设置字体。

到此这篇关于Flutter 设置全局字体的实现的文章就介绍到这了,更多相关Flutter 全局字体内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • flutter 屏幕尺寸适配和字体大小适配的实现

    前言: 现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配. 安卓原生的话有自己的适配规则,可以根据不同的尺寸建立不同的文件夹,系统会根据当前的设备尺寸取对应的大小的布局.而flutter本身并没有适配规则,而原生的又比较繁琐,这就需要我们自己去对屏幕进行适配. 点击直达github地址 如果有帮助

  • Flutter 如何设置App的主色调与字体

    Flutter 如何设置App的主色调与字体

    Flutter 的主题色和字体可以在MaterialApp 中设置,即在 main.dart 的入口返回的 MaterialApp 组件统一设置全局的主色调和字体.如下面的代码所示: class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'App 框架', theme: ThemeData( primaryColor: Colo

  • Flutter实现渐变色加描边字体效果

    Flutter实现渐变色加描边字体效果

    目录 写在前面 内容 实现描边 实现渐变 一些调整 参考 写在前面 实现如下图的效果,这个数字的内部和外部都有渐变色. 内容 实现描边 在网上搜索一轮,可以看到通过用 Stack,来让两个 Text叠加,并对上一个 Text设置外部描边,就可以得到如下的效果. Stack( alignment: Alignment.center, children: [ Text( '100', style: TextStyle( fontSize: 40, fontWeight: FontWeight.bol

  • Flutter 透明状态栏及字体颜色的设置方法

    注:底色透明是否生效与android版本有关,版本过低设置无效 1.在main.dart内设置 void main(){ runApp(new MyApp()); if (Platform.isAndroid) { //设置Android头部的导航栏透明 SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle( statusBarColor: Colors.transparent, //全局设置透明 statusBarIc

  • Flutter 设置全局字体的实现

    目录 引入字体 全局字体 问题 library中设置失效 TextSpan中字体未生效 引入字体 首先在项目中创建fonts目录,然后将将ttf文件放到该目录下,然后在pubspec文件中添加该字体文件,如: ... flutter:   fonts:     - family: PingFang       fonts:         - asset: fonts/PingFang-Regular.ttf   assets:     - assets/exit_icon.png 这里fami

  • vue项目设置活性字体过程(自适应字体大小)

    vue项目设置活性字体过程(自适应字体大小)

    目录 vue项目设置活性字体 起因 我们来看看详细步骤吧 效果 vue项目引入特殊字体 特殊字体指的是默认电脑中没有的 vue项目设置活性字体 起因 最近,博主在按照ui设计稿参数编写页面之后,发现页面整体偏大,尤其是字体现实的特别大,但是在按UI设计的页面尺寸展示的时候却十分舒服,这是怎么回事,在和另一位前端交流之后,得知可以动态设置字体大小,即不同页面有不同的大小的字体十分灵活. 首先,我们要清楚字体设置比较常用的三个单位px,rem,em px是一个大小单位,相当于1像素,这要写死就是固定

  • IOS中一段文字设置多种字体颜色代码

    给定range和需要设置的颜色,就可以给一段文字设置多种不同的字体颜色,使用方法如下: 复制代码 代码如下: [self fuwenbenLabel:contentLabel FontNumber:[UIFont systemFontOfSize:15] AndRange:NSMakeRange(6, 1) AndColor:RGBACOLOR(34, 150, 253, 1)]; 复制代码 代码如下: //设置不同字体颜色 -(void)fuwenbenLabel:(UILabel *)lab

  • 第三方包jintellitype实现Java设置全局热键

    Java原生API并不支持为应用程序设置全局热键.要实现全局热键,需要用JNI方式实现,这就涉及到编写C/C++代码,这对于大多数不熟悉C/C++的javaer来说,有点困难.不过幸好,国外有人已经实现了,发布成第三方java包,借此,我们可以很方便的设置全局热键而不用编写任何C/C++代码. jintellitype官网貌似目前访问不到,这里提供下载:http://www.jb51.net/softs/217788.html. jintellitype由两部分组成,一部分是java写的jint

  • Vue2.0设置全局样式(less/sass和css)

    Vue2.0设置全局样式(less/sass和css)

    为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步:在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误 require('./common/less/index.less') 第二步:在build目录下的webpack.base.c

  • 微信小程序设置全局请求URL及封装wx.request请求操作示例

    本文实例讲述了微信小程序设置全局请求URL及封装wx.request请求操作.分享给大家供大家参考,具体如下: app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * method: 请求方式 * url: 请求地址 * data: 要传递的参数 * callback: 请求成功回调函数 * errFun: 请求失败回调函数 **/ wxRequest(metho

  • Pycharm使用之设置代码字体大小和颜色主题的教程

    1. File->Setting  打开如下所示的对话框,可以在Editor->General->Font下设置字体大小(Size).行距(Line spacing) 2. Editor->Color Scheme  展开如下所示内容,可以选择自己喜欢的主题样式,设置颜色等属性. 以上这篇Pycharm使用之设置代码字体大小和颜色主题的教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Python中使用socks5设置全局代理的方法示例

    0x01介绍 PySocks使您可以通过SOCKS和HTTP代理服务器发送流量.它是SocksiPy的现代分支,具有错误修复和其他功能. 0x02 安装 λ pip3 install Pysocks 0x03 测试 正常请求,httperror无法获得 加入socks5代理后,可以获得当前程序的全局代理可以 正常访问 import socket import socks socks.set_default_proxy(socks.SOCKS5, "127.0.0.1", 10808)

  • vscode设置Fira_Code字体及改变编辑器字体、背景颜色的代码详解

    一.设置Fira_Code字体 1.下载字体 这里给出github下载链接,点击链接后在README.md中的Download & Install一栏中即可下载,链接中也包括字体示例及介绍,可自行查看. Fira_Code字体下载 2,安装字体 下载并解压,进入里面的ttf文件夹,双击或右击后点击安装,里面包含六种样式,可以选择性安装或全安装即可. 3,设置vscode 打开vscode,点击左下角齿轮形状图标,选择settings,得到下图所示界面: 根据上图箭头所示依次点击Font,Edit

  • vue设置全局访问接口API地址操作

    在使用vue框架进行前后端分离项目开发时,通常涉及到与后段接口进行交互,平时一般使用比较多的就是用axios来实现调用后段接口,写法一般为 xxx() { const _this = this axios.get("http://ip:port/xx/xx").then(function (resp) { .....//省略 }) } 但是有一个比较普遍的问题就是,假如我们后端接口地址改变了,或者是网络地址发生了变化,就需要在上面IP以及端口的位置每一处都需要修改,所以我们需要一个一处

随机推荐