一、Flutter 自定义字体

1、ttf 字体文件

字体资源文件 : ttf 格式的字体资源 ;

Flutter 应用字体资源文件 : 在 Flutter 应用根目录下创建 fonts 目录 , 将下载的 ttf 字体放资源文件在该 fonts 目录下 ;

2、ttf 字体资源配置

配置字体资源 : 自定义字体资源需要在 pubspec.yaml 配置文件中配置 , 字体资源配置格式如下 :

fonts:- family: Schylerfonts:- asset: fonts/Schyler-Regular.ttf- asset: fonts/Schyler-Italic.ttfstyle: italic- family: Trajan Profonts:- asset: fonts/TrajanPro.ttf- asset: fonts/TrajanPro_Bold.ttfweight: 700

这里使用 RubikMonoOne-Regular.ttf 字体文件 , 配置如下 :

flutter:# 配置图片资源assets:- images/hunter.png# 配置字体资源fonts:- family: RubikMonoOnefonts:- asset: fonts/RubikMonoOne-Regular.ttf

该配置对应的字体文件 RubikMonoOne-Regular.ttf 放在根目录下的 fonts 目录下 ;

3、获取字体

在 pubspec.yaml 配置文件中配置完字体资源后 , 点击 " Pub get " 按钮 , 同步资源 ;

显示如下内容后 , 说明资源同步成功 ;

D:\001_Programs\004_Flutter\flutter\bin\flutter.bat --no-color pub get
Running "flutter pub get" in flutter_cmd...                         0.7s
Process finished with exit code 0

4、全局使用字体

全局应用字体 : 在 MaterialApp 根节点的 theme 字段值的 ThemeData 组件中的 fontFamily 字段设置字体 , 这里设置在 pubspec.yaml 配置文件中配置的 family 标签下的值 “RubikMonoOne” ;

字体配置 :

  fonts:- family: RubikMonoOnefonts:- asset: fonts/RubikMonoOne-Regular.ttf

代码示例 :

MaterialApp(// 设置标题title: ,// 设置主题theme: ThemeData(// 配置字体fontFamily: "RubikMonoOne"),// 设置界面主组件home: ,
)

5、局部使用字体

局部应用字体 : 在 Text 的 style 字段设置文本风格 , TextStyle 类型组件的 fontFamily 可以设置字体 ;

代码示例 :

Text("StatefulWidget 页面生命周期", style: TextStyle(fontFamily: "RubikMonoOne"),
),

二、完整代码示例

完整代码示例 :

import 'package:flutter/material.dart';
import 'package:flutter_cmd/GesturePage.dart';
import 'package:flutter_cmd/ResourcePage.dart';
import 'package:flutter_cmd/StatelessWidgetPage.dart';
import 'package:flutter_cmd/WidgetLifeCyclePage.dart';
import 'AppLiftCyclePage.dart';
import 'LauncherPage.dart';
import 'LayoutPage.dart';
import 'StatefulWidgetPage.dart';
import 'ThemePage.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(// 设置标题title: 'Flutter Demo',// 设置主题theme: ThemeData(// 配置字体fontFamily: "RubikMonoOne",// 配置主题颜色primarySwatch: Colors.blue,),// 设置界面主组件home: Scaffold(// 设置标题栏appBar: AppBar(title: Text("路由与导航"),),// 设置界面主体组件body: RouteNavigator(),),// 配置路由routes: <String, WidgetBuilder>{"StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(),"StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(),"LayoutPage" : (BuildContext context) => LayoutPage()},);}
}class RouteNavigator extends StatefulWidget {@override_RouteNavigatorState createState() => _RouteNavigatorState();
}class _RouteNavigatorState extends State<RouteNavigator> {@overrideWidget build(BuildContext context) {return Container(// 居中alignment: Alignment.center,child: Column(children: <Widget>[RaisedButton(onPressed: (){Navigator.pushNamed(context, "LayoutPage");},child: Text("通过路由名跳转到页面1"),),RaisedButton(onPressed: (){Navigator.pushNamed(context, "StatefulWidgetPage");},child: Text("通过路由名跳转到页面2"),),RaisedButton(onPressed: (){Navigator.pushNamed(context, "StatelessWidgetPage");},child: Text("通过路由名跳转到页面3"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));},child: Text("通过导航跳转到页面1"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => StatefulWidgetPage()));},child: Text("通过导航跳转到页面2"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => StatelessWidgetPage()));},child: Text("通过导航跳转到页面3"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => GesturePage()));},child: Text("手势检测界面"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => ResourcePage()));},child: Text("资源使用界面"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => LauncherPage()));},child: Text("第三方应用跳转"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => WidgetLiftCyclePage()));},child: Text("StatefulWidget 页面生命周期", style: TextStyle(fontFamily: "RubikMonoOne"),),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => AppLifeCyclePage()));},child: Text("应用生命周期"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => ThemePage()));},child: Text("主题切换"),),],),);}
}

运行效果展示 :

三、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 插件下载地址 : https://pub.dev/packages
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15602328 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )相关推荐

推荐30个国外的精美字体下载网站
这里收集了30个提供字体下载的网站列表,推荐给设计的朋友们,有些字体真的特别漂亮,不过有些是免费的,有些是付费的.如果你有更好的提供字体下载的网站,记得分享给大家哦,赶紧瞧瞧. DaFont High ...
Flutter 使用自定义字体
效果: 非常的简单. 导入字体随便在网上找一个免费的字体,下载下来会得到一个后缀为.ttf的文件,即字体文件. 或者自己做一个. 在项目的根目录中新建一个fonts文件夹(目录.命名可以随意),并把 ...
Android UI 字体库(.ttf文件)的使用 -- xml方式
Android 8.0(API 级别 26)引入了"XML 中的字体"这项新功能, 可以在 res/font/ 文件夹中添加 font 文件. 要访问字体资源,请使用 @font/ ...
c语言font6x8,爱字体下载安卓版-iFont爱字体下载V5.9.8.6 安卓手机版-全新的手机字体软体西西软件下载...
iFont爱字体是一款全新的手机字体美化软件,拥有简体.繁体.英体.韩语.日语五大类在线字体大全.集成上百款精美可爱的中英文字体,最新最全的英文.简繁体字库.轻轻松松换字体,简简单单换心情!字体随心变 ...
电脑字体在哪个文件夹_壹心奇妙体下载壹心奇妙体字体下载
壹心奇妙体是一款卡通可爱的创意黑体字体,适合应用于艺术设计.平面宣传设计.网页设计.书法字体,海报设计等领域,欢迎喜欢这款字体的朋友下载收藏. Windows系统文字安装方法第一种:适合安装多个字体 ...
C++解析IconFont矢量字体文件ttf，以及无锯齿显示矢量字体
一.下载矢量字体文件TTF 1.可以使用集成好的矢量字体,如FontAwesome.openwebicons.IcoMoon-Free.typicons-- 只要去搜索关键字,找到对应的官网即可下载到 ...
android9默认字体下载,iFont爱字体 v5.5.9 Android特别版-实用的手机换字体软件
iFont爱字体 v5.5.9 Android特别版-实用的手机换字体软件书法字体2015.09.28iFont iFont(爱字体)是安卓平台最强大.最专业的字体软件,精彩字体,随你所换!iFon ...
120个ps常用的好看的英文艺术字体下载分享
全部为 ttf 格式字体,可以安装到系统中使用. 1.ps好看的英文字体英文字体.atomic_sushi.ttf字体下载 2.ps好看的英文字体.arcade_pizzadude.ttf字体下载 3 ...
python中文字体下载_python+freetype+opencv 图片中文（汉字）显示详细图文教程和项目完整源代码...
效果展示开发环境配置 python+freetype配置项目完整文档下载(源代码+字体+图片) 完整字体下载包括:times new roman,中山行书百年纪念版,calibri,Christ ...

【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )

文章目录