Question

如何在不为每个粗细指定新系列的情况下选择不同的字体粗细？

  fonts:
 - family: Montserrat
   fonts:
     - asset: assets/fonts/Montserrat-Regular.ttf
       weight: 100
     - asset: assets/fonts/Montserrat-Bold.ttf
       weight: 700
 - family: MontserratBold
   fonts:
     - asset: assets/fonts/Montserrat-Bold.ttf

和小部件：

                      child: Text(
                    'TEST',
                    style: TextStyle(
                      fontSize: 17.4,
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w700,
                      color: Colors.black87,
                    ),
                  ),

..

                      child: Text(
                    'TEST2',
                    style: TextStyle(
                        fontSize: 17.4,
                        fontFamily: 'MontserratBold',
                        color: Colors.black87),
                  ),

实际的Montserrat-Bold仅与“ TEST2”一起使用。我尝试在pubspec.yaml中使用“ Packages get”，然后重新启动应用程序。

Answer 1

实际上会忽略pubspec中的字体和样式设置：https://github.com/flutter/flutter/issues/36739#issuecomment-521806077

您需要检查Montserrat-Bold.ttf中元数据中描述的权重，也许不是700。

要显示元数据，可以使用以下站点：https://fontdrop.info/，字体粗细显示在Data / usWeightClass下。

Answer 2

根据我的实验，体重计似乎在幕后做一些聪明的事情。也许取决于ttf或设备。我敢打赌FontWeight.w900可能会变成粗体。

在我的代码中，如果我指定100（常规）和200（粗体）的粗细，直到我要求FontWeight.w500时才使用粗体。我可以说出来，因为我也要求用斜体字显示，并且无论重量如何，粗体ttf都不会由于某种原因而用斜体字显示。因此，尽管权重通过编程方式“加粗”了字体，但要了解它们如何以及为什么落入特定字体似乎需要一些猜测。

然后，我尝试使用3种字体：细，常规和粗体，并在pubspec.yaml中将它们设置为合理的粗细，分别为100、400和700，在文档中将其描述为thin，normal / regular / plain和bold，现在上方 FontWeight.w400的所有内容都使用粗体。

希望这会有所帮助，或者会有更多知识渊博的人

Answer 3

从the docs中，我们得到以下常量列表：

w100薄，最薄的
  w200超轻型
  w300灯
  w400普通/普通/普通
  w500中号
  w600半粗体
  w700加粗
  w800超粗体
  w900黑色，最厚

因此，在pubspec中，您可以这样定义自定义字体：

  fonts:
   - family: Montserrat
     fonts:
       - asset: fonts/Montserrat-Regular.ttf
       - asset: fonts/Montserrat-SemiBold.ttf
         weight: 600
       - asset: fonts/Montserrat-Bold.ttf
         weight: 700

并像下面这样在您的代码中使用它：

final h1 = new TextStyle(
    fontSize: 24.0, 
    fontWeight: FontWeight.w600  // semi-bold
);

Answer 4

您需要在- family处添加适当的缩进。

fonts:
  - family: Montserrat
    fonts:
      - asset: assets/fonts/Montserrat-Regular.ttf
        weight: 100
      - asset: assets/fonts/Montserrat-Bold.ttf
        weight: 700

Answer 5

您需要像这样在pubspec.yaml内指定字体

fonts:
- family: Montserrat
  fonts:
    - asset: assets/fonts/montserrat/Montserrat-Regular.ttf

然后写：

title: Text(
      'Sample Text',
      style: TextStyle(
        fontWeight: FontWeight.bold,
        fontFamily: 'Montserrat',
      ),
    ),

Answer 6

@Jannie Theunissen的回答就足够了，我只想在此处发布一个示例小部件来演示自定义字体的所有粗细。万一您想将它们全部比较并决定使用哪个。

这是您要检查自定义字体的操作：

下载字体，以iOS字体“ San Francisco”为例，您可以here下载它。
将其放在您的your_app/assets/fonts文件夹中（您只需要.ttf文件）。

将其添加到pubspec.yaml文件中（注意缩进和破折号很重要）：

fonts:
- family: SanFrancisco
  fonts:
    - asset: assets/fonts/SFUIDisplay-Ultralight.ttf
      weight: 100
    - asset: assets/fonts/SFUIDisplay-Thin.ttf
      weight: 200
    - asset: assets/fonts/SFUIDisplay-Light.ttf
      weight: 300
    - asset: assets/fonts/SFUIDisplay-Regular.ttf
      weight: 400
    - asset: assets/fonts/SFUIDisplay-Medium.ttf
      weight: 500
    - asset: assets/fonts/SFUIDisplay-Semibold.ttf
      weight: 600
    - asset: assets/fonts/SFUIDisplay-Bold.ttf
      weight: 700
    - asset: assets/fonts/SFUIDisplay-Heavy.ttf
      weight: 800
    - asset: assets/fonts/SFUIDisplay-Black.ttf
      weight: 900

将此演示小部件作为正文添加到您的Scaffold：

class FontWeightsDemo extends StatelessWidget {
  final String font = "SanFrancisco";
  final double size = 20.0;
  final double height = 45.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: height,
            child: Center(
                child: Text(
              "This text has weight w100",
              style: TextStyle(
                  fontFamily: font,
                  fontSize: size,
                  fontWeight: FontWeight.w100),
            )),
          ),
          Container(
            height: height,
            child: Center(
                child: Text(
                  "This text has weight w200",
                  style: TextStyle(
                      fontFamily: font,
                      fontSize: size,
                      fontWeight: FontWeight.w200),
            )),
          ),
          Container(
            height: height,
            child: Center(
                child: Text(
                  "This text has weight w300",
                  style: TextStyle(
                      fontFamily: font,
                      fontSize: size,
                      fontWeight: FontWeight.w300),
            )),
          ),
          Container(
            height: height,
            child: Center(
                child: Text(
                  "This text has weight w400",
                  style: TextStyle(
                      fontFamily: font,
                      fontSize: size,
                      fontWeight: FontWeight.w400),
            )),
          ),
          Container(
            height: height,
            child: Center(
                child: Text(
                  "This text has weight w500",
                  style: TextStyle(
                      fontFamily: font,
                      fontSize: size,
                      fontWeight: FontWeight.w500),
            )),
          ),
          Container(
            height: height,
            child: Center(
                child: Text(
                  "This text has weight w600",
                  style: TextStyle(
                      fontFamily: font,
                      fontSize: size,
                      fontWeight: FontWeight.w600),
            )),
          ),
          Container(
            height: height,
            child: Center(
                child: Text(
                  "This text has weight w700",
                  style: TextStyle(
                      fontFamily: font,
                      fontSize: size,
                      fontWeight: FontWeight.w700),
            )),
          ),
          Container(
                height: height,
                child: Center(
                child: Text(
                  "This text has weight w800",
                  style: TextStyle(
                      fontFamily: font,
                      fontSize: size,
                      fontWeight: FontWeight.w800),
                )),
              ),
          Container(
                height: height,
                child: Center(
                child: Text(
                  "This text has weight w900",
                  style: TextStyle(
                      fontFamily: font,
                      fontSize: size,
                      fontWeight: FontWeight.w900),
            )),
          ),
        ],
      ),
    );
  }
}

这是您应该得到的：

只是认为这可能对某人有用。

Answer 7

您可以在已有style: TextStyle(...)的旁边添加或减少字体粗体

使用.apply(fontWeightDelta: int)

例如

style: TextStyle(
         fontSize: 17.4,
         fontFamily: 'Montserrat',
         fontWeight: FontWeight.w700,
         color: Colors.black87,
       ).apply(fontWeightDelta: 2),

增量1表示FontWeight的+100（增量-1表示-100）。因此，这使您的FontWeight为900，而不是700

对于fontWeight，将增量应用于FontWeight枚举索引值，例如，当style.apply（fontWeightDelta：-2）时应用于fontWeight为FontWeight的样式。w500将返回一个具有FontWeight.w300的TextStyle。

https://api.flutter.dev/flutter/painting/TextStyle/apply.html

Flutter不选择基于fontWeight的自定义字体

7 个答案: