Flutter google_fonts 包与 roboto flex 字体不匹配

Question

Flutter 不渲染 robotoFlex 字体字体粗细示例 Bold、W600、W700、W800、W900，

我在我的项目中使用 google_fonts，我不知道出了什么问题。它与其他字体（如 GoogleFont.lato 等）配合良好

字体比较

                                  child: Text(
                                    'GoogleFonts.lato',
                                    style: GoogleFonts.lato(
                                        textStyle: const TextStyle(
                                      fontSize: 17,
                                    )),
                                  ).pV(5).pH(20),
                                ),
                                Center(
                                  child: Text(
                                    'This is GoogleF.lato',
                                    style: GoogleFonts.lato(
                                        textStyle: const TextStyle(
                                            fontSize: 26,
                                            fontWeight: FontWeight.w900)),
                                  ).pV(5).pH(20),
                                ),
                                Center(
                                  child: Text(
                                    'This is GoogleF.lato',
                                    style: GoogleFonts.lato(
                                        textStyle: const TextStyle(
                                            fontSize: 26,
                                            fontWeight: FontWeight.bold)),
                                  ).pV(1).pH(20),
                                ),
                                const SizedBox(
                                  height: 35,
                                ),
                                Center(
                                  child: Text(
                                    'GoogleFonts.robotoflex',
                                    style: GoogleFonts.robotoFlex(
                                        textStyle: const TextStyle(
                                      fontSize: 17,
                                    )),
                                  ).pV(5).pH(20),
                                ),
                                Center(
                                  child: Text(
                                    'This is GoogleF.RobotoFlex',
                                    style: GoogleFonts.robotoFlex(
                                        textStyle: const TextStyle(
                                            fontSize: 26,
                                            fontWeight: FontWeight.w900)),
                                  ).pV(1).pH(20),
                                ),
                                Center(
                                  child: Text(
                                    'This is GoogleF.RobotoFlex',
                                    style: GoogleFonts.robotoFlex(
                                        textStyle: const TextStyle(
                                            fontSize: 26,
                                            fontWeight: FontWeight.bold)),
                                  ).pV(1).pH(20),
                                ),

outPut 在这里你可以看到 google.lato 字体渲染字体粗细但 roboto 不渲染的区别

Answer 1

这似乎是 GoogleFonts 包和相关字体的问题。如果你不使用 GoogleFonts 包，你也可以获得你想要的东西。

在此输入图像描述 步骤如下：

1. 将可变字体文件添加到您的资源中（我将其重命名为 简短的“RobotoFlex-VariableFont.ttf”
2. 将其添加到您的 pubspec yaml
3. 将其添加到您的代码中。 我在 TextTheme 中定义了它，然后添加了代码。

示例代码

// pubspec.yaml
//
    fonts:
        - family: RobotoFlex
          fonts:
            - asset: assets/RobotoFlex-VariableFont.ttf

// main.dart
//
    return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            fontFamily: 'RobotoFlex',
          ),

// widget code
// 
    Text(
                    'This is GoogleF.RobotoFlex',
                    style: TextStyle(
                      fontSize: 26,
                      fontVariations: <FontVariation>[FontVariation('wght', 200.0)],
                    ),
                  ),
                ),

Answer 2

Flutter 正在努力使用可变字体。仅支持正常字体粗细 <= 500 and bold >= 600。为了能够使用更多粗细，请使用以下方法：

1. 在pubspec.yaml中单独加载robotoFlex：

flutter:
    fonts:
        - family: RobotoFlex
          fonts:
            - asset: assets/fonts/RobotoFlex-VariableFont.ttf

2. 然后（可能有效，但别名会被破坏）：

Text(
   'This is RobotoFlex',
   style: TextStyle(
      fontFamily: 'RobotoFlex',
      fontWeight: FontWeight.w900
   ),
)

3. 使用 fontVariations 代替 fontWeight：

Text(
   'This is GoogleF.RobotoFlex',
   style: TextStyle(
      fontFamily: 'RobotoFlex',
      fontVariations: [
         FontVariation('wght', 900),
      ]
   )
)

这应该会给你你预期的结果