在添加自定义字体的 Flutter 中,FontWeight 不影响文本
In Flutter on adding custom font, FontWeight is not affecting the text
image pubspec
我想将 Noir Pro
设置为我的 flutter 应用程序的默认字体系列。
默认 Roboto fontFamily 更改为 NoirPro,但字体粗细 e.g(.w400,w500,w600)
无法正常工作。我找不到任何其他在线帮助。这让我很沮丧
在pubspec.yaml
fonts:
- family: NoirPro
fonts:
- asset: resources/fonts/NoirPro_Light.ttf
weight: 300
- asset: resources/fonts/NoirPro_Normal.ttf
weight: 400
- asset: resources/fonts/NoirPro_Medium.ttf
weight: 500
- asset: resources/fonts/NoirPro_Bold.ttf
weight: 700
- asset: resources/fonts/NoirPro_Heavy.ttf
weight: 800
In main.dart
theme: ThemeData(
fontFamily: 'NoirPro',
canvasColor: Colors.white,
),
尝试定义不带空的姓氏space
- family: NoirPro
尝试在没有空的情况下定义 space - family: NoirPro
而且您还需要在文本小部件中提供您想要的权重
Text(
"Hello",
style: TextStyle(
fontWeight: FontWeight.w400
),
)
我找到了原因,而且非常微不足道:
Flutter 根据字体本身的元数据匹配字体家族中的字体,而不是 pubspec.yaml 中声明的样式描述符。
我的 NoirPro、medium 和 bold 字体包含元数据,声明它们的权重分别为 400、410 和 420。但是,Flutter 文本子系统仅支持表示 100 的偶数倍 (https://api.flutter.dev/flutter/dart-ui/FontWeight-class.html) 的字体粗细桶。所以这三种字体都映射到FontWeight.w400,字体样式匹配器不能根据粗细在这些字体之间进行选择。
(您可以使用此站点检查字体文件的元数据:https://fontdrop.info/)
在 pubspec.yaml 中将这些字体声明为不同的系列可以解决这个问题。
目前请求的权重是根据字体本身定义的权重元数据选择的。 pubspec.yaml中的权重被忽略。
应更新文档(说明书)以反映这一点,以免混淆其他开发人员。
现在我的 pubspec.yaml 是:
fonts:
- family: NoirProNormal
fonts:
- asset: resources/fonts/NoirPro_Normal.ttf
- family: NoirProLight
fonts:
- asset: resources/fonts/NoirPro_Light.ttf
- family: NoirProMedium
fonts:
- asset: resources/fonts/NoirPro_Medium.ttf
- family: NoirProBold
fonts:
- asset: resources/fonts/NoirPro_Bold.ttf
- family: NoirProHeavy
fonts:
- asset: resources/fonts/NoirPro_Heavy.ttf
并且在使用文本小部件时:
Text(
"Hello World",
style: TextStyle(
fontSize: size.width * 0.075,
fontFamily: "NoirProMedium",
color: Colors.white)
),
image pubspec
我想将 Noir Pro
设置为我的 flutter 应用程序的默认字体系列。
默认 Roboto fontFamily 更改为 NoirPro,但字体粗细 e.g(.w400,w500,w600)
无法正常工作。我找不到任何其他在线帮助。这让我很沮丧
在pubspec.yaml
fonts:
- family: NoirPro
fonts:
- asset: resources/fonts/NoirPro_Light.ttf
weight: 300
- asset: resources/fonts/NoirPro_Normal.ttf
weight: 400
- asset: resources/fonts/NoirPro_Medium.ttf
weight: 500
- asset: resources/fonts/NoirPro_Bold.ttf
weight: 700
- asset: resources/fonts/NoirPro_Heavy.ttf
weight: 800
In main.dart
theme: ThemeData(
fontFamily: 'NoirPro',
canvasColor: Colors.white,
),
尝试定义不带空的姓氏space
- family: NoirPro
尝试在没有空的情况下定义 space - family: NoirPro
而且您还需要在文本小部件中提供您想要的权重
Text(
"Hello",
style: TextStyle(
fontWeight: FontWeight.w400
),
)
我找到了原因,而且非常微不足道:
Flutter 根据字体本身的元数据匹配字体家族中的字体,而不是 pubspec.yaml 中声明的样式描述符。
我的 NoirPro、medium 和 bold 字体包含元数据,声明它们的权重分别为 400、410 和 420。但是,Flutter 文本子系统仅支持表示 100 的偶数倍 (https://api.flutter.dev/flutter/dart-ui/FontWeight-class.html) 的字体粗细桶。所以这三种字体都映射到FontWeight.w400,字体样式匹配器不能根据粗细在这些字体之间进行选择。
(您可以使用此站点检查字体文件的元数据:https://fontdrop.info/)
在 pubspec.yaml 中将这些字体声明为不同的系列可以解决这个问题。
目前请求的权重是根据字体本身定义的权重元数据选择的。 pubspec.yaml中的权重被忽略。
应更新文档(说明书)以反映这一点,以免混淆其他开发人员。 现在我的 pubspec.yaml 是:
fonts:
- family: NoirProNormal
fonts:
- asset: resources/fonts/NoirPro_Normal.ttf
- family: NoirProLight
fonts:
- asset: resources/fonts/NoirPro_Light.ttf
- family: NoirProMedium
fonts:
- asset: resources/fonts/NoirPro_Medium.ttf
- family: NoirProBold
fonts:
- asset: resources/fonts/NoirPro_Bold.ttf
- family: NoirProHeavy
fonts:
- asset: resources/fonts/NoirPro_Heavy.ttf
并且在使用文本小部件时:
Text(
"Hello World",
style: TextStyle(
fontSize: size.width * 0.075,
fontFamily: "NoirProMedium",
color: Colors.white)
),