如何在 flutter web 中添加自定义字体?
How to add custom font in flutter web?
所以我开发 flutter 移动应用程序已经有一段时间了,我想探索 flutter web,现在我尝试添加自定义字体,但它没有显示自定义字体。
我已经添加了所有依赖项并为字体创建了一个单独的文件夹并添加到 pubspec.yaml 中,就像我在 flutter mobile 中所做的那样。
我的main.dart
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("Dextroxd",
style: TextStyle(
fontSize: 36.0,
fontFamily: 'CookieFam',
color: Colors.white,
fontWeight: FontWeight.w500
)),
centerTitle: true,
),
);
}
}
我的 pubspec
description: An app built using Flutter for web
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0 <3.0.0'
flutter:
fonts:
- family: CookieFam
fonts:
- asset: assets/Cookie-Regular.ttf
dependencies:
flutter_web: any
flutter_web_ui: any
dev_dependencies:
build_runner: ^1.6.2
build_web_compilers: ^2.1.0
pedantic: ^1.7.0
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
在字体文件夹中添加字体并在pubspec.yaml中添加例如参考给定的图像
字体文件夹:
pubspec.yaml
现在,对于网络,在网络部分添加 assets
文件夹,并在 JSON 下方添加名为 web/assets/FontManifest.json
的文件
[
{
"family": "MuliBold",
"fonts": [
{
"asset": "fonts/Muli-Bold.tff"
}
]
},
{
"family": "MuliExtraBold",
"fonts": [
{
"asset": "fonts/Muli-ExtraBold.ttf"
}
]
},
{
"family": "MuliRegular",
"fonts": [
{
"asset": "fonts/Muli-Regular.ttf"
}
]
}
]
现在你的字体已经应用到你的 flutter web 应用程序了。
所以我开发 flutter 移动应用程序已经有一段时间了,我想探索 flutter web,现在我尝试添加自定义字体,但它没有显示自定义字体。
我已经添加了所有依赖项并为字体创建了一个单独的文件夹并添加到 pubspec.yaml 中,就像我在 flutter mobile 中所做的那样。
我的main.dart
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("Dextroxd",
style: TextStyle(
fontSize: 36.0,
fontFamily: 'CookieFam',
color: Colors.white,
fontWeight: FontWeight.w500
)),
centerTitle: true,
),
);
}
}
我的 pubspec
description: An app built using Flutter for web
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0 <3.0.0'
flutter:
fonts:
- family: CookieFam
fonts:
- asset: assets/Cookie-Regular.ttf
dependencies:
flutter_web: any
flutter_web_ui: any
dev_dependencies:
build_runner: ^1.6.2
build_web_compilers: ^2.1.0
pedantic: ^1.7.0
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
在字体文件夹中添加字体并在pubspec.yaml中添加例如参考给定的图像
字体文件夹:
pubspec.yaml
现在,对于网络,在网络部分添加 assets
文件夹,并在 JSON 下方添加名为 web/assets/FontManifest.json
[
{
"family": "MuliBold",
"fonts": [
{
"asset": "fonts/Muli-Bold.tff"
}
]
},
{
"family": "MuliExtraBold",
"fonts": [
{
"asset": "fonts/Muli-ExtraBold.ttf"
}
]
},
{
"family": "MuliRegular",
"fonts": [
{
"asset": "fonts/Muli-Regular.ttf"
}
]
}
]
现在你的字体已经应用到你的 flutter web 应用程序了。