Flutter 不选择基于 fontWeight 的自定义字体
Posted
技术标签:
【中文标题】Flutter 不选择基于 fontWeight 的自定义字体【英文标题】：Flutter not picking custom fonts based on fontWeight 【发布时间】：2019-05-10 06:10:38 【问题描述】：如何在不为每个粗细指定新系列的情况下选择不同的字体粗细？
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”并重新启动应用程序。
【问题讨论】：
我也遇到了这个问题，你需要在更改资产后完全重新安装应用程序，（不是热重载，不仅仅是启动。） 【参考方案1】：您需要在- family 处添加适当的缩进。
fonts:
- family: Montserrat
fonts:
- asset: assets/fonts/Montserrat-Regular.ttf
weight: 100
- asset: assets/fonts/Montserrat-Bold.ttf
weight: 700
【讨论】：
感谢 Parth 的建议，但我已经使用了正确的缩进，但并不能解决问题。这只是 *** 代码格式。 能不能把项目放到github上分享一下链接【参考方案2】：从我的实验来看，权重系统似乎在幕后做了一些聪明的事情。也许这取决于 ttf 或设备。我敢打赌，FontWeight.w900 可能属于粗体字。
在我的代码中，如果我将粗体指定为 100（常规）和 200（粗体），则在我请求 FontWeight.w500 之前不会使用粗体字体。我可以说出来，因为我也用斜体要求它，并且无论重量如何，粗体 ttf 由于某种原因不会斜体。因此，虽然权重确实以编程方式“加厚”了字体，但要了解它们如何以及为何落入特定字体似乎需要一些猜测工作。
然后我尝试使用 3 种字体：细、常规和粗体，并将它们在 pubspec.yaml 中设置为 100、400 和 700 的合理权重，这些在文档中描述为 thin、normal / regular / plain 和 bold ，现在所有以上 FontWeight.w400 都使用粗体。
希望这会有所帮助，或者有更多知识渊博的人出现
【讨论】：
我是这么认为的，这对我来说是非常有用的信息。因为我不能让我的字体很好用。我为常规字体定义了 3 个粗细，600（半粗体）、700（粗体）、800（粗体）。但是当我使用重字体（800）时。该应用程序仍在使用常规字体。我不知道为什么，也没有任何线索。谢谢！【参考方案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
);
【讨论】：
我遵循了每一步，但在我卸载应用程序并重新构建之前，没有任何效果。然后它起作用了【参考方案4】：@Jannie Theunissen 的回答就足够了，我只是想在这里发布一个示例小部件来演示您的自定义字体的所有权重。以防万一您想比较它们并决定使用哪一个。
因此，您需要执行以下操作来检查您的自定义字体：
下载你的字体，以ios字体“旧金山”为例，你可以下载它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),
)),
),
],
),
);
这是你应该得到的东西：
只是觉得它可能对某人有用。
【讨论】：
我遵循了每一步，但在我卸载应用程序并重新构建之前，没有任何效果。然后它起作用了【参考方案5】：pubspec 中的字体和样式设置实际上被忽略了：https://github.com/flutter/flutter/issues/36739#issuecomment-521806077
您需要检查 Montserrat-Bold.ttf 中元数据中描述的权重，可能不是 700。
要显示元数据，可以使用这个站点：https://fontdrop.info/，字体粗细显示在Data/usWeightClass下。
【讨论】：
这应该是目前公认的答案 此外，您可以在此处编辑字体粗细glyphrstudio.com/online【参考方案6】：您可以在已有style: TextStyle(...)的同时添加或减少字体粗体
使用.apply(fontWeightDelta: int)
例如
style: TextStyle(
fontSize: 17.4,
fontFamily: 'Montserrat',
fontWeight: FontWeight.w700,
color: Colors.black87,
).apply(fontWeightDelta: 2),
delta 1 表示 FontWeight +100（delta -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 的自定义字体的主要内容，如果未能解决你的问题，请参考以下文章
如何在flutter / dart中使用具有设定大小的自定义字体？
TypeScript 2.4.1 -> fontWeight -> 类型 'number' 不可分配给类型 '"inherit" | 400 |