[Flutter] 用FontLoader从本地加载字体

App开发过程中，常常会需要加载第三方字体的场景，如何加载字体呢？通常有两种方式：

一、加载asset中内置字体

官方文档有详细说明
总结起来：

1. 创建fonts文件夹，放置字体（推荐.ttf字体）
1. asset中声明字体

flutter:fonts:- family: fangZhengfonts:- asset: fonts/方正硬笔行书.ttf- family: ZhiMangXingfonts:- asset: fonts/ZhiMangXing-Regular.ttf- family: HuaKangShaoNvfonts:- asset: fonts/华康少女字体.ttf

使用字体

// declare the text style
const textStyle = const TextStyle(fontFamily: 'fangZheng',
);// use the text style
var buttonText = const Text("Use the font for this text",style: textStyle,
);

注意点

设置了字体加载不出来，检查yaml配置文件，注意空格，family拼写，以及路径是否正确
family 就是个名字，可以自己指定，但不要重复
调试的时候，热更新过程中，加载过的字体和family名称是固定且对应的，修改family名称热更新并不会生效，需要关闭app重新运行
如果字体加载出现混淆，flutter clean, 然后关闭app, 重新run

二、用FontLoader动态加载字体

动态加载字体，顾名思义加载手机存储卡上下载的字体文件。
使用场景有二：

需要字体，但想要减小安装包体积，毕竟一个字体几M到几十M大小
有在线下载和更换字体的功能

此时就需要FontLoader登场了：

FontLoader(family) —> addFont() —> load()

注意点

addFont(Future<ByteData>bytes) 这个方法需要传入的参数即是字体文件内容

从网上查找资料通常会让你用 rootBundle.load(key) 方法加载字体，如果你的字体打包在app内，那么这个方法是ok的，因为这个方法是加载asset中资源的。

但是如果你的字体是下载到存储卡上的，使用 rootBundle.load(key) 则无法加载字体
那如何加载呢？
加载字体的本质，不过是读出文件中内容，所以方法也很简单，如下：

  Future<ByteData> readFont() async {ByteData byteData = (await fontFile.readAsBytes()).buffer.asByteData();return byteData;}var fontLoader = FontLoader(family);fontLoader.addFont(readFont());await fontLoader.load();

这样即可成功加载存储卡上的字体

最后分享一下工具类

import 'dart:async';
import 'dart:collection';
import 'dart:io';
import 'package:flutter/services.dart';///处理字体的工具类
class FontUtil {///缓存加载过的字体static final HashSet<String> _LoadedFonts = HashSet();///通过fontId生成对应的familyNamestatic String getFontFamilyById(int fontId) {return "Font#$fontId";}///加载字体///fontId: 字体id///fontFile: .ttf字体文件static FutureOr<bool> loadFont(int fontId, File fontFile) async {if (!fontFile.existsSync()) {print("loadFont failed, font file is not exists, file path = ${fontFile.path}");return false;}Future<ByteData> readFont() async {ByteData byteData = (await fontFile.readAsBytes()).buffer.asByteData();return byteData;}final String family = getFontFamilyById(fontId);if (isFontLoaded(family: family)) {print("family $family has been loaded");} else {var fontLoader = FontLoader(family);fontLoader.addFont(readFont());await fontLoader.load();_LoadedFonts.add(family);}return true;}///字体是否已经安装///fontId和family二选一static bool isFontLoaded({int? fontId, String? family}) {if (fontId != null) {return _LoadedFonts.contains(getFontFamilyById(fontId));}if (family != null) {return _LoadedFonts.contains(family);}return false;}
}

如果对你有帮助，请点赞、评论加收藏~

[Flutter] 用FontLoader从本地加载字体相关推荐

解决fonts.googleapis.com/css加载卡，谷歌字体本地加载下载
http://www.xgllseo.com/?p=5808 google不能访问这个不解释,最可靠的方法就是本地加载谷歌字体资源 @import url(https://fonts.googleap ...
在Flutter中更快地加载您的图像资源
本文主要介绍在Flutter中更快地加载您的图像资源我们可以将图像放在我们的资产文件夹中,但如何更快地加载它们?这是 Flutter 中的一个秘密函数,可以帮助我们做到这一点 - precacheI ...
WPF 从文件加载字体
原文:WPF 从文件加载字体版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 http://lindexi.gitee.io 访问博客. ...
C++ QT加载字体，以及iconfont使用
在一些arm linux板上开发qt界面时,会遇到无法显示中文,产生乱码的情况.这时可以通过加载中文字体解决,例如先下载DroidSansFallback.ttf字体文件到本地,然后将该字体加载到全局 ...
Three.js Vue 如何加载字体，和遇到问题解决：中加载字体的问题 Uncaught SyntaxError: Unexpected token = in JSON at position 0
Three.js Vue 中加载字体的问题 Uncaught SyntaxError: Unexpected token = in JSON at position 0 一.转换字体文件到 json ...
android字体文件过大,加载字体文件过大的问题，不是icon，而是fontFamily
目前在写app时遇到ttf文件加载太大了,放本地打包比app还大(差不多了),放服务器加载太慢,于是乎想要看看能不能把这个ttf字体包搞小一点. 首先是加载字体文件的loadFontFace,插件市场 ...
在Vue.js中加载字体的最佳做法
博客原文:https://blog.zhangbing.site/2021/04/07/best-practices-for-loading-fonts-in-vue/ 添加字体不应该对性能产生负面影 ...
【Flutter】Flutter 混合开发 ( 混合开发中 Flutter 的热重启 / 热加载 )
文章目录前言一.混合开发中启用 Flutter 的热重启 / 热加载二.混合开发中 Flutter 的热重启 / 热加载命令测试三.指定混合应用连接的设备四.相关资源前言上一篇博客 ...
php 文字图片怎么保存为图片,php技术实现加载字体并保存成图片
下面通过一段代码给大家详解介绍下php技术实现加载字体并保存成图片. // Set the content-type header("Content-type: image/png" ...

[Flutter] 用FontLoader从本地加载字体

一、加载asset中内置字体

注意点

二、用FontLoader动态加载字体

注意点

最后分享一下工具类

[Flutter] 用FontLoader从本地加载字体相关推荐

最新文章

热门文章