luoyi_flutter_font 1.0.1
luoyi_flutter_font: ^1.0.1 copied to clipboard
flutter dynamic load font, optimize chinese font render effect
优化flutter中文字体渲染问题,动态从网络加载字体
安装依赖 #
flutter pub add luoyi_flutter_font
初始化默认字体 #
- 更新main.dart
import 'package:flutter/material.dart';
import 'package:luoyi_flutter_font/luoyi_flutter_font.dart';
late List<String> _fontFamilyFallback;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
_fontFamilyFallback = await FlutterFont.initDefaultFont();
runApp(const _App());
}
class _App extends StatelessWidget {
const _App();
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
fontFamily: FlutterFont.fontFamily,
fontFamilyFallback: _fontFamilyFallback,
),
home: const HomePage(),
);
}
}
- pubspec.yaml添加中文字体,这是裁剪后的谷歌 NotoSansSC 字体,每个字体大约500kb,包含最常用的2000个中文汉字
flutter:
uses-material-design: true
fonts:
- family: NotoSansSC
fonts:
- asset: packages/luoyi_flutter_font/fonts/NotoSansSC/NotoSansSC-Medium.ttf
- asset: packages/luoyi_flutter_font/fonts/NotoSansSC/NotoSansSC-Bold.ttf
加载动态字体 #
void test() {
// 加载系统字体
FlutterFont.loadFont(FlutterFont.systemFont);
// 加载 NotoSansSC 中文字体
FlutterFont.loadFont(FlutterFont.chineseFont);
// 加载初始化时应用的字体
FlutterFont.loadFont(FlutterFont.initialFont);
// 加载资产包中的字体,不要定义 fontUrl 和 fontWeights
FlutterFont.loadFont(FontModel(
fontFamily: 'my_font',
));
// 加载在线字体
FlutterFont.loadFont(FontModel(
fontFamily: 'LongCang',
fontUrl: 'https://fonts.gstatic.com/s/a/f626a05f45d156332017025fc68902a92f57f51ac57bb4a79097ee7bb1a97352.ttf',
));
// 加载多种字重在线字体
FlutterFont.loadFont(FontModel(
fontFamily: 'NotoSansSC',
fontWeights: {
400: 'https://fonts.gstatic.com/s/a/eacedb2999b6cd30457f3820f277842f0dfbb28152a246fca8161779a8945425.ttf',
500: 'https://fonts.gstatic.com/s/a/5383032c8e54fc5fa09773ce16483f64d9cdb7d1f8e87073a556051eb60f8529.ttf',
700: 'https://fonts.gstatic.com/s/a/a7a29b6d611205bb39b9a1a5c2be5a48416fbcbcfd7e6de98976e73ecb48720b.ttf',
},
));
}
库中的预设字体 #
以下字体配置已是测试出的最佳显示,有些字体文件比较特殊,例如苹方字体,Medium字库已自带了medium、bold两种字重, 当然,下面的字体只能渲染常用字重,如果引入100、200、300、800、900等极细、极重字体会大幅度增加应用尺寸。
flutter:
uses-material-design: true
fonts:
# 谷歌开源字体,可以商用
- family: NotoSansSC
fonts:
- asset: packages/luoyi_flutter_font/fonts/NotoSansSC/NotoSansSC-Bold.ttf
- asset: packages/luoyi_flutter_font/fonts/NotoSansSC/NotoSansSC-Medium.ttf
- asset: packages/luoyi_flutter_font/fonts/NotoSansSC/NotoSansSC-Regular.ttf
# 苹方字体,Apple下的设备可以商用
- family: PingFang SC
fonts:
- asset: packages/luoyi_flutter_font/fonts/PingFangSC/PingFangSC-Medium.otf
- asset: packages/luoyi_flutter_font/fonts/PingFangSC/PingFangSC-Regular.otf
# 小米字体,可以商用,提示:我试了多次,小米的字体文件不能同时加载400、500字重的字体
- family: MiSans
fonts:
- asset: packages/luoyi_flutter_font/fonts/MiSans/MiSans-Semibold.ttf
- asset: packages/luoyi_flutter_font/fonts/MiSans/MiSans-Medium.ttf
# 鸿蒙字体,可以商用
- family: HarmonyOS Sans SC
fonts:
- asset: packages/luoyi_flutter_font/fonts/HarmonyOS/HarmonyOS-Bold.ttf
- asset: packages/luoyi_flutter_font/fonts/HarmonyOS/HarmonyOS-Medium.ttf
- asset: packages/luoyi_flutter_font/fonts/HarmonyOS/HarmonyOS-Regular.ttf