Flutter如何导入ttf字体

在Flutter项目中如何正确导入和使用自定义的ttf字体文件？我已经将字体文件放在assets/fonts目录下，并在pubspec.yaml中配置了路径，但运行时仍然无法加载字体。请问具体的导入步骤和需要注意的细节有哪些？比如是否需要重启应用或清理缓存？

2 回复

在Flutter中使用TTF字体，步骤如下：

  1. 在pubspec.yaml的flutter部分添加字体路径：
fonts:
  - family: MyFont
    fonts:
      - asset: fonts/MyFont.ttf
  1. 将TTF文件放入项目fonts文件夹。
  2. 在代码中通过fontFamily: 'MyFont'使用。

更多关于Flutter如何导入ttf字体的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中导入TTF字体，可以通过以下步骤实现：

  1. 将字体文件放入项目
    在项目根目录下创建 fonts 文件夹（通常放在 assets 目录中），并将 .ttf 文件放入其中。例如：

    your_project/
├── assets/
│   └── fonts/
│       └── your_font.ttf

  2. 配置 pubspec.yaml
    在 pubspec.yaml 文件的 flutter 部分添加字体配置：

    flutter:
  fonts:
    - family: YourFontFamily  # 自定义字体名称
      fonts:
        - asset: assets/fonts/your_font.ttf

    注意缩进对齐，避免格式错误。

  3. 在代码中使用字体
    通过 TextStyle 指定字体族名称：

    Text(
  'Hello Flutter',
  style: TextStyle(
    fontFamily: 'YourFontFamily', // 与pubspec中定义的family一致
    fontSize: 20,
  ),
),

注意事项：

  • 修改 pubspec.yaml 后需执行 flutter pub get 刷新依赖。
  • 字体名称（family）可自定义，但需确保代码中引用一致。
  • 支持多个字重（如粗体、斜体），需在 pubspec.yaml 中分别声明并指定 weight 属性。

完成后重启应用即可生效。

回到顶部