Flutter教程实现自定义字体样式

在Flutter中如何实现自定义字体样式？我已经尝试了在pubspec.yaml文件中添加字体文件并配置family属性，但运行时总提示找不到字体。我的步骤如下：

  1. 将.ttf文件放在assets/fonts目录下
  2. 在pubspec.yaml中添加了fonts配置和assets路径
  3. 在代码中使用TextStyle指定fontFamily

但应用运行时仍显示默认字体，没有生效。是否还需要其他步骤？比如是否需要注册字体或清理缓存？求具体解决方案！

3 回复

要实现自定义字体样式，在Flutter中可以按照以下步骤操作：

  1. 准备字体文件：将你的字体文件（如.ttf或.otf格式）放入assets/fonts目录下。如果不存在该目录，可以在项目根目录手动创建。

  2. 配置pubspec.yaml：在pubspec.yaml中声明字体资源。

    flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
          weight: 400
        - asset: assets/fonts/CustomFont-Bold.ttf
          weight: 700

  3. 使用自定义字体：

    Text(
  'Hello World',
  style: TextStyle(
    fontFamily: 'CustomFont', // 对应family名称
    fontSize: 20,
    fontWeight: FontWeight.bold, // 使用预设的weight
  ),
)

  4. 热重载应用：保存修改后，运行flutter run或热重载以查看效果。

确保字体路径和文件名正确，同时注意字体版权是否允许在应用中使用。这样即可实现自定义字体样式的应用。

更多关于Flutter教程实现自定义字体样式的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要实现自定义字体样式，在Flutter中步骤如下：

  1. 添加字体文件
    将你的字体文件（如.ttf或.otf格式）放入assets/fonts/目录下。然后在pubspec.yaml中配置资源路径：

    flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/yourfont.ttf
        - asset: assets/fonts/yourfont-bold.ttf
          weight: 700

  2. 使用自定义字体
    在代码中通过TextStyle引用字体：

    Text(
  'Hello World',
  style: TextStyle(
    fontFamily: 'CustomFont',
    fontSize: 24,
    fontWeight: FontWeight.w700,
  ),
)

  3. 热重载查看效果
    保存后运行项目，热重载即可看到字体变化。

确保字体路径和配置正确，避免遗漏或拼写错误。如果字体未生效，检查pub get是否成功以及路径是否正确。

Flutter 自定义字体样式教程

在Flutter中，你可以通过以下步骤实现自定义字体样式：

1. 添加字体文件到项目中

在项目根目录创建 fonts 文件夹，放入你的字体文件（如.ttf或.otf格式）

your_project/
  fonts/
    my_custom_font.ttf

2. 在pubspec.yaml中配置字体

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: fonts/my_custom_font.ttf

3. 使用自定义字体

Text(
  'Hello with Custom Font',
  style: TextStyle(
    fontFamily: 'MyCustomFont',
    fontSize: 24,
    color: Colors.blue,
  ),
)

4. 创建可重用的文本样式

建议在Theme中定义或创建自定义TextStyle类：

// 在MaterialApp的theme中定义
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headline1: TextStyle(fontFamily: 'MyCustomFont', fontSize: 32),
      bodyText1: TextStyle(ffontFamily: 'MyCustomFont', fontSize: 16),
    ),
  ),
)

5. 使用Google Fonts插件（可选）

如果要使用Google Fonts中的字体，可以：

  1. 添加依赖：google_fonts: ^latest_version
  2. 使用方式：
Text(
  'Google Font Example',
  style: GoogleFonts.lato(
    fontSize: 30,
    fontWeight: FontWeight.bold,
  ),
)

这样你就可以在Flutter应用中灵活使用自定义字体样式了。

回到顶部