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

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

从文档中，我们可以获得以下常量列表：

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

@Jannie Theunissen 的回答就足够了，我只是想在这里发布一个示例小部件来演示自定义字体的所有权重。以防万一你想比较它们并决定使用哪一个。

因此，您需要执行以下操作来检查自定义字体：

1. 下载你的字体，以iOS字体“San Francisco”为例，你可以在这里下载。

2. 把它放在你的your_app/assets/fonts文件夹中（你只需要 .ttf 文件）。

3. 将它添加到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
   

4. 将此演示小部件作为正文添加到您的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 5

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

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