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

Posted 2021-03-27

我正在尝试使用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，但它看起来不像那个。

答案

如果要将字体应用于文本，请不要使用copyWith。只需使用新的TextStyle设置您的样式。

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

如果要全局应用文本，则可以在材质应用中通过创建当前主题的副本并应用下面的一些新属性来应用全局文本更改。

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。

另一答案

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

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

另一答案

不要忘记停止应用程序调试并再次启动应用程序。如果不这样做，使用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),
    ),