如何在 Flutter Web 中添加自定义字体？

Posted 2023-02-23

【中文标题】如何在 Flutter Web 中添加自定义字体？

【英文标题】：How to add custom font in flutter web?

【发布时间】：2019-12-12 03:30:14

【问题描述】：

所以我正在开发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

【问题讨论】：

github.com/flutter/flutter_web/blob/master/docs/…

How to change Flutter for web Font?的可能重复

不是重复的，可能 Flutter 目前不支持 Web 的自定义字体（.ttf 托管）。

【参考方案1】：

在字体文件夹中添加字体并在 pubspec.yaml 中添加例如参考给定图像

字体文件夹：

pubspec.yaml

现在在 web 部分中添加 assets 文件夹，并在下面添加名称为 web/assets/FontManifest.json 的 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 应用程序了。