css - 如何在 flutter/dart 中使用设置大小的自定义字体？

Question

我正在尝试将 color、fontWeight 和 fontFamily 与 style: style.copyWith 一起使用，我尝试使用的自定义字体是 Vonique，我已将它导入 pubspec.yaml

fonts:
       - family: Vonique
         fonts: 
           - assets: fonts/Vonique-64-Bold-Italic.ttf
           - assets: fonts/Vonique-64-Italic.ttf
           - assets: fonts/Vonique-64-Bold.ttf
           - assets: fonts/Vonique-64.ttf

这是导入它的正确方法吗？

我已经尝试过使用''和不使用''，仍然没有改变文本字体。

Text('Login',
 style: style.copyWith(
   color: Colors.redAccent, fontWeight: FontWeight.bold, fontFamily: 'Vonique'
),
),

和

Text('Login',
 style: style.copyWith(
   color: Colors.redAccent, fontWeight: FontWeight.bold, fontFamily: Vonique
),
),

我希望字体看起来像这里的字体https://www.dafont.com/vonique-64.font但它看起来不像那个。

Answer 1

如果你想将字体应用到你不使用 copyWith 的文本。只需使用新的 TextStyle 设置您的样式。

Text('Login', style: TextStyle(fontFamily: 'Vonique',  fontWeight: FontWeight.bold))

如果您想全局应用文本，那么在您的 Material 应用中，您可以通过创建当前主题的副本并应用如下所示的一些新属性来应用全局文本更改。

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
     // Uncomment in phase 3 to apply white to text
    textTheme: Theme.of(context).textTheme.apply(
      bodyColor: Colors.white,
      displayColor: Colors.white
    ),
  ),
  home: HomeSingleFile(),
);

同理，如果您想要应用现有样式并进行一些额外更改，请使用 .apply 方法而不是 copyWith。