android Flutter未根据fontWeight选取自定义字体

huus2vyu  于 2023-02-02  发布在  Android
关注(0)|答案(8)|浏览(196)

如何选择不同的字体粗细而不为每个粗细指定新的字体系列?

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只用于“TEST 2”。我试过在pubspec.yaml中使用“Packages get”并重新启动应用程序。

20jt8wwn

20jt8wwn1#

the docs中我们可以得到下面的常量列表:
w100最薄,厚度最小
w200超轻型
w300轻型
w 400正常/常规/普通
w500培养基
w 600半粗体
w700粗体
w800超粗体
w 900黑色,最厚
所以在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
);
2j4z5cfb

2j4z5cfb2#

pubspec中的字体和样式设置实际上被忽略:https://github.com/flutter/flutter/issues/36739#issuecomment-521806077
您需要检查Montserrat-Bold.ttf中的元数据描述的权重,可能不是700。
要显示元数据,可以使用以下站点:https://fontdrop.info/,字体粗细显示在“数据/usWeightClass”下。

ecfsfe2w

ecfsfe2w3#

从我的实验来看,权重系统似乎在幕后做了一些聪明的事情。也许这取决于ttf或设备。我敢打赌,虽然FontWeight.w900可能会落入粗体。
在我的代码中,如果指定权重为100(经常)和200(对于粗体),直到我请求FontWeight.w500时才使用粗体。我之所以能看出来,是因为我也请求了斜体,而不管权重如何,粗体TTF出于某种原因都不会斜体。因此,虽然权重确实通过编程使字体“变粗”,捕捉它们如何以及为什么落入特定字体似乎需要一些猜测工作。
然后我尝试了3种字体:细、规则和粗体,并将它们设置为pubspec.yaml中的合理权重100、400和700,这些权重在文档中被描述为thinnormal / regular / plainbold,并且现在 * 高于 * FontWeight.w400的任何内容都使用粗体。
希望这能有所帮助,或者有更有知识的人沿着

jgzswidk

jgzswidk4#

@Jannie泰尼森给出的答案已经足够了,我只是想在这里发布一个示例小部件来演示你自定义字体的所有权重。以防你想比较它们并决定使用哪一个。
下面是检查自定义字体的步骤:
1.下载您的字体,让我们举个例子iOS字体“弗朗西斯科”,你可以下载它here.
1.把它放在你的your_app/assets/fonts文件夹里(你只需要.ttf文件)。
1.将其添加到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

1.将此演示小部件作为主体添加到您的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),
            )),
          ),
        ],
      ),
    );
  }
}

这是你应该得到的东西:

只是觉得可能对某人有用。

svgewumm

svgewumm5#

您可以添加或减少字体的粗体旁边你已经有style: TextStyle(...)
使用.apply(fontWeightDelta: int)
例如

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

delta 1表示字体权重为+100(delta -1表示-100)。因此,这使字体权重为900而不是700
对于fontWeight,delta应用于FontWeight枚举索引值,因此例如style.apply(fontWeightDelta:-2)当应用于fontWeight为FontWeight.w500的样式时,将返回带有FontWeight.w300的TextStyle。
https://api.flutter.dev/flutter/painting/TextStyle/apply.html

e5nqia27

e5nqia276#

除了@szotp的答案之外,下面是如何修改flutter所遵循的python脚本中一组字体文件的权重:创建srcout目录,并将原始字体文件放入src目录,下面的脚本将把具有正确元数据的字体文件放入out目录。

import os
from fontTools import ttLib

# Declare your fonts and their correct weights here, like below
to_change = {
    'Neue Radial B Thin Italic.ttf': 100,
    'Neue Radial B Thin.ttf': 100,
    'Neue Radial B Extra Bold Italic.ttf': 800,
    'Neue Radial B Bold.ttf': 700,
    'Neue Radial B Book.ttf': 500,
    'Neue Radial B Regular Italic.ttf': 400,
    'Neue Radial B Light.ttf': 300,
    'Neue Radial B Book Italic.ttf': 500,
    'Neue Radial B Regular.ttf': 400,
    'Neue Radial B Extra Bold.ttf': 800,
    'Neue Radial B Extra Light.ttf': 200,
    'Neue Radial B Light Italic.ttf': 300,
    'Neue Radial B Extra Light Italic.ttf': 200,
    'Neue Radial B Bold Italic.ttf': 700,
    'Neue Radial B Medium.ttf': 600,
    'Neue Radial B Black.ttf': 900,
    'Neue Radial B Black Italic.ttf': 900,
    'Neue Radial B Medium Italic.ttf': 600,
}

for file, weight in to_change.items():
    with ttLib.TTFont(os.path.join('src', file)) as tt:
        tt['OS/2'].usWeightClass = weight
        tt.save(os.path.join('out',file))
klsxnrf1

klsxnrf17#

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

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

ef1yzkbh8#

使您指定的字体粗细被忽略的原因在这里的官方文档中说明:
请注意,定义weight属性不会覆盖字体的实际粗细。即使将其粗细设置为100,您也无法使用FontWeight.w100访问RobotoMono-Bold。
字体粗细实际上是存储在字体文件中的元数据,Flutter不会用您指定的元数据覆盖此元数据。
一种可能的解决方法是更改指定字体文件字体粗细的元数据,选中answer即可。

相关问题