2026-01-03移动开发

Flutter 中如何自定义字体

#Flutter

更新于 2024-04-27 07:27

下载字体文件

这里以 Poppins 字体为例

去 Google Fonts 下载字体
解压后复制到项目内的 assets/fonts 目录下

配置字体

修改配置文件 pubspec.yaml，配置好 assets 和 fonts

根据以下对应FontWeight对应的英文名称配置不同的字体文件

JavaScript

{
  FontWeight.w100: 'Thin',
  FontWeight.w200: 'ExtraLight',
  FontWeight.w300: 'Light',
  FontWeight.w400: 'Regular',
  FontWeight.w500: 'Medium',
  FontWeight.w600: 'SemiBold',
  FontWeight.w700: 'Bold',
  FontWeight.w800: 'ExtraBold',
  FontWeight.w900: 'Black',
}

示例：

YAML

flutter:
  uses-material-design: true
  assets:
    - assets/fonts/Poppins/
  fonts:
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins/Poppins-Thin.ttf
        - asset: assets/fonts/Poppins/Poppins-ThinItalic.ttf
          style: italic
          weight: 100
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins/Poppins-ExtraLight.ttf
        - asset: assets/fonts/Poppins/Poppins-ExtraLightItalic.ttf
          style: italic
          weight: 200
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins/Poppins-Light.ttf
        - asset: assets/fonts/Poppins/Poppins-LightItalic.ttf
          style: italic
          weight: 300
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins/Poppins-Regular.ttf
        - asset: assets/fonts/Poppins/Poppins-Italic.ttf
          style: italic
          weight: 400
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins/Poppins-Medium.ttf
        - asset: assets/fonts/Poppins/Poppins-MediumItalic.ttf
          style: italic
          weight: 500
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins/Poppins-SemiBold.ttf
        - asset: assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf
          style: italic
          weight: 600
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins/Poppins-Bold.ttf
        - asset: assets/fonts/Poppins/Poppins-BoldItalic.ttf
          style: italic
          weight: 700
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins/Poppins-ExtraBold.ttf
        - asset: assets/fonts/Poppins/Poppins-ExtraBoldItalic.ttf
          style: italic
          weight: 800
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins/Poppins-Black.ttf
        - asset: assets/fonts/Poppins/Poppins-BlackItalic.ttf
          style: italic
          weight: 900

配置 MaterialApp 中的 fontFamily 属性

dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        // 配置对应的字体名称
        fontFamily: 'Poppins',
      ),
    ),
  );
}

Flutter 中如何自定义字体

下载字体文件

配置字体

评论 0

留下评论