如何在 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。

Answer 2

不要忘记停止应用程序调试并再次启动您的应用程序。 如果不这样做，您对pubspec.yaml中的字体所做的更改将不会在Hot Reload甚至Hot Restart中可见。

    fonts:
      - family: Source Sans Pro
      fonts:
        - asset: fonts/SourceSansPro-Regular.ttf
        weight: 400
        - asset: fonts/SourceSansPro-SemiBold.ttf
        weight: 600
        - asset: fonts/SourceSansPro-Bold.ttf
        weight: 700
        - asset: fonts/SourceSansPro-Black.ttf
        weight: 900

我在每种字体下指定粗细的原因是因为这使得FontWeight.w400例如指的是 Regular 而FontWeight.w900指的是 Black。

这就是我在代码中使用它的方式：

    Text("Planning",
         style: TextStyle(
         color: Color(0xFF43b3e0),
         fontFamily: "Source Sans Pro",  // <- Looks up the specified font in pubspec.yaml
         fontWeight: FontWeight.w700,    // <- uses the Bold font weight
         fontSize: 28.0),
    ),

Answer 3

在文本字段中设置自定义字体：（使用单引号是正确的方法）

Text(
  'I like custom fonts',
  style: TextStyle(fontFamily: 'Vonique'),
);

要使用字体大小设置自定义字体：

Text(
  'I like custom fonts',
  style: TextStyle(
            fontFamily: 'Vonique',
            fontSize: 20.0,
         ),
);

如果你想定义字体粗细，那么你可以在 pubspec.yaml 文件中定义它，如下所示：

flutter:
  fonts:
    - family: Vonique
      fonts:
        - asset: Vonique-64-Bold-Italic.ttf
          weight: 500

Answer 4

如果我们使用google_fonts包，则.ttf文件不需要存储在您的资产文件夹中，也不需要映射到 pubspec 中。 相反，它们在运行时通过 HTTP 获取一次并缓存在应用程序的文件系统中。

Text(
  'This is Fonts',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
),

Answer 5

在pubspec.yaml中设置

flutter:
  fonts:
  - family: Quicksand
    fonts:
    - asset: assets/fonts/Quicksand-Regular.ttf

Answer 6

您必须在 pubspec.yaml 文件中根据此定义系列，然后您可以轻松地在代码中使用自定义字体：

fonts:
 - family: roboto_regular
   fonts:
     - asset: assets/fonts/Roboto-Regular.ttf
 - family: roboto_italic
   fonts:
     - asset: assets/fonts/Roboto-Italic.ttf
 - family: roboto_black
   fonts:
     - asset: assets/fonts/Roboto-Black.ttf
 - family: roboto_bold
   fonts:
     - asset: assets/fonts/Roboto-Bold.ttf
 - family: roboto_light
   fonts:
     - asset: assets/fonts/Roboto-Light.ttf

然后像这样在您的代码中使用它；-

Text(
    "Some Text",
    overflow: TextOverflow.clip,
    maxLines: 1,
    style: TextStyle(
      fontFamily: 'roboto_bold',
      // The color must be set to white for this to work
      color: Colors.white,
      fontStyle: FontStyle.normal,
      fontWeight: FontWeight.w700,
      fontSize: 15,
    ),