copyWith 上的 Google 字体粗细问题

Question

我正在创建文本样式模型并使用 getter 来获得使用 google_fonts 的文本样式。当我提供 fontWeight: 属性时出现问题。此外，fontWeight 未提供与 GoogleFont 相似的外观。

我在另一个项目上测试过，重建项目，使用 html renderer。我已经检查过但它不起作用。

风格对比

But Looks from GoogleFont

flutter doctor -v没问题

Flutter (Channel stable, 2.5.2, on Microsoft Windows [Version
    10.0.19043.1288], locale en-US)
    • Flutter version 2.5.2 at C:\Tools\flutter
    • Upstream repository https://github.com/flutter/flutter.git        
    • Framework revision 3595343e20 (3 weeks ago), 2021-09-30 12:58:18  
      -0700
    • Engine revision 6ac856380f
    • Dart version 2.14.3

型号class

class AppTextStyles {
  static TextStyle get normalMidBlod => const TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 33,
      );

  static TextStyle get latoMidBlod => GoogleFonts.lato(
        fontWeight: FontWeight.bold, //this one
        color: Colors.black,
        fontSize: 33,
      );
  static TextStyle get lato => GoogleFonts.lato(
        color: Colors.black,
        fontSize: 33,
      );
}

测试小工具


class Test extends StatelessWidget {
  const Test({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            children: const [
              Text("style: TextStyle.."),
              Text(
                "w100",
                style: TextStyle(fontWeight: FontWeight.w100, fontSize: 33),
              ),
              Text(
                "w200",
                style: TextStyle(fontWeight: FontWeight.w200, fontSize: 33),
              ),
              Text(
                "w300",
                style: TextStyle(fontWeight: FontWeight.w300, fontSize: 33),
              ),
              Text(
                "w400",
                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 33),
              ),
              Text(
                " w500",
                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 33),
              ),
              Text(
                " w600",
                style: TextStyle(fontWeight: FontWeight.w600, fontSize: 33),
              ),
              Text(
                "  w700",
                style: TextStyle(fontWeight: FontWeight.w700, fontSize: 33),
              ),
              Text(
                "  w800",
                style: TextStyle(fontWeight: FontWeight.w800, fontSize: 33),
              ),
              Text(
                "  w900",
                style: TextStyle(fontWeight: FontWeight.w900, fontSize: 33),
              ),
            ],
          ),
          const SizedBox(
            width: 30,
          ),
          Column(
            children: [
              Text("normalMidBlod.copyWith"),
              Text(
                "w100",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w100),
              ),
              Text(
                "w200",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w200),
              ),
              Text(
                "w300",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w300),
              ),
              Text(
                "w400",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w400),
              ),
              Text(
                " w500",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w500),
              ),
              Text(
                " w600",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w600),
              ),
              Text(
                "  w700",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w700),
              ),
              Text(
                "  w800",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w800),
              ),
              Text(
                "  w900",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w900),
              ),
            ],
          ),
          const SizedBox(
            width: 30,
          ),
          RichText(
            text: TextSpan(
              children: [
                TextSpan(text: "latoBold.copyWith \n"),
                TextSpan(
                  text: "w100 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w100),
                ),
                TextSpan(
                  text: "w200 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w200),
                ),
                TextSpan(
                  text: "w300 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w300),
                ),
                TextSpan(
                  text: "w400 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w400),
                ),
                TextSpan(
                  text: " w500 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w500),
                ),
                TextSpan(
                  text: " w600 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w600),
                ),
                TextSpan(
                  text: "  w700 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w700),
                ),
                TextSpan(
                  text: "  w800 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w800),
                ),
                TextSpan(
                  text: "  w900 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w900),
                ),
              ],
            ),
          ),
          const SizedBox(
            width: 30,
          ),
          RichText(
            text: TextSpan(
              children: [
                TextSpan(text: "lato.copyWith \n"),
                TextSpan(
                  text: "w100 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w100),
                ),
                TextSpan(
                  text: "w200 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w200),
                ),
                TextSpan(
                  text: "w300 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w300),
                ),
                TextSpan(
                  text: "w400 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w400),
                ),
                TextSpan(
                  text: " w500 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w500),
                ),
                TextSpan(
                  text: " w600 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w600),
                ),
                TextSpan(
                  text: "  w700 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w700),
                ),
                TextSpan(
                  text: "  w800 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w800),
                ),
                TextSpan(
                  text: "  w900 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w900),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

只有某些字体支持一个不同字重的ttf文件。如果您注意到字母 g，它在每个权重中看起来都不一样。您可能需要从 Google 字体下载完整的字体系列，并将其包含在资产下的 pubspec.yaml 中。应该可以。

检查 https://pub.dev/packages/google_fonts 应用程序资产部分中的捆绑字体。

copyWith 上的 Google 字体粗细问题

GoogleFont-Weight issue on copyWith

google-font-api

dart

flutter

flutter-web