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设置样式即可。

bar

如果您想在全球范围内应用文本，则可以在材质应用中通过创建当前主题的副本并应用如下所示的一些新属性来应用全局文本更改。

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

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

Answer 2

要在文本字段中设置自定义字体，请执行以下操作：（使用单引号将其正确是一种方法）

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 3

别忘了停止应用调试并重新启动应用。否则，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指向常规，而FontWeight.w900则指向黑色。

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

    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 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,
    ),

如何在flutter / dart中使用具有设定大小的自定义字体？

6 个答案: