flutter - 如何在 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,
),
);
}
}
我的发布规范
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 中添加例如参考给定图像
字体文件夹:
发布规范.yaml
现在为 web 添加assets
文件夹在 web 部分并在下面添加名为 web/assets/ 的 JSON 文件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 应用程序。
推荐阅读
- java - Android Studio:偏好 android:summary="%s",但有一定的默认摘要
- python - 如何使用 Python 计算两个日期之间的天数?
- javascript - 使用 requirejs 进行引导表本地化会出现错误“无法读取未定义的属性 'locales'”
- spring-boot - 使用 Jmeter 测试后,Spring Boot 的容器内存使用率不低 - Kubernetes
- javascript - VueJS中需要把这个对象改成这个对象数组
- javascript - 在 vue / element ui 对话框中有条件地删除注入的元素
- javascript - React 等待父组件渲染
- css - 本地字体到 scss 文件的反应
- sql - 在带参数的过程中插入语句
- postgresql - 无法使用 Spring Boot 连接 Postgres 数据库