在Flutter中添加自定义字体时，FontWeight不会影响文本

在Flutter中添加自定义字体时，FontWeight 不会影响文本的原因通常与自定义字体的加载和使用方式有关。以下是详细解释和解决方案：

基础概念

自定义字体：指除了系统默认字体之外，开发者自行添加的字体文件。
FontWeight：用于设置文本的粗细，常见的值包括 FontWeight.normal 和 FontWeight.bold。

类型

TrueType 字体（.ttf）
OpenType 字体（.otf）

应用场景

在应用中使用品牌特定的字体。
为特定文本设置不同的粗细效果。

问题原因

在Flutter中添加自定义字体时，FontWeight 不会影响文本的原因通常是因为自定义字体的 fontFamily 没有正确加载或使用。

解决方案

以下是详细的步骤和示例代码，展示如何在Flutter中正确加载和使用自定义字体，并确保 FontWeight 生效。

步骤 1：添加字体文件

将自定义字体文件（例如 CustomFont.ttf）添加到项目的 assets/fonts 目录下。

步骤 2：配置 `pubspec.yaml`

在 pubspec.yaml 文件中添加字体资源路径：

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

步骤 3：使用自定义字体

在代码中使用自定义字体，并设置 FontWeight：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Font Example',
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(
            fontFamily: 'CustomFont',
            fontWeight: FontWeight.normal,
            fontSize: 16,
          ),
          bodyText2: TextStyle(
            fontFamily: 'CustomFont',
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Font Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Normal Text', style: Theme.of(context).textTheme.bodyText1),
              Text('Bold Text', style: Theme.of(context).textTheme.bodyText2),
            ],
          ),
        ),
      ),
    );
  }
}

参考链接

Flutter 官方文档 - 自定义字体

通过以上步骤，你可以确保自定义字体正确加载，并且 FontWeight 能够正常影响文本的粗细。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

在Flutter中添加自定义字体时，FontWeight不会影响文本

基础概念

相关优势

类型

应用场景

问题原因