如何在flutter中使用自定义字体样式?

rqqzpn5f  于 2022-12-05  发布在  Flutter
关注(0)|答案(5)|浏览(303)

我已经在我的pubspec.yaml上设置了以下代码:

fonts:
- family: Roboto
  fonts:
    - asset: fonts/Roboto-Light.ttf
    - asset: fonts/Roboto-Thin.ttf
    - asset: fonts/Roboto-Italic.ttf

但是我不知道在我的小部件中使用Roboto的样式“Roboto-Light.ttf”。

new ListTile(
          title: new Text(
            "Home",
            style: new TextStyle(
              fontFamily: "Roboto",
              fontSize: 60.0,
            ),
          ),
        ),

我不知道如何访问样式“Roboto-Light.ttf”。如何做到这一点?
谢谢你!

c2e8gylq

c2e8gylq1#

Roboto是Material样式的默认字体,无需在pubspec.yaml中添加。
要使用不同的变化,请设置TextStyle

Text(
  'Home',
  style: TextStyle(
    fontWeight: FontWeight.w300, // light
    fontStyle: FontStyle.italic, // italic
  ),
);

我认为瘦是FontWeight.w200
GoogleFonts网站中特定字体的styles部分提到了相应字体的FontWeights

kmpatx3s

kmpatx3s2#

通常,可以直接指定字体样式。

    • 出版规范yaml**
fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Light.ttf
          weight: 300
        - asset: fonts/Roboto-Thin.ttf
          weight: 100
        - asset: fonts/Roboto-Italic.ttf
          style: italic
    • 小工具**
ListTile(
  title: Text(
    'Home',
    style: TextStyle(
      fontFamily: 'Roboto',
      fontWeight: FontWeight.w300, // -> Roboto-Light.ttf
      // fontWeight: FontWeight.w100 // -> Roboto-Thin.ttf
      fontSize: 60.0,
    ),
  ),
),
hxzsmxv2

hxzsmxv23#

正确声明和访问字体。

pubspec.yaml文件中声明字体路径。
按照正确的缩进。
例如,我在fonts文件夹中添加了IndieFlower-Regular.ttf文件。这是我的pubspec.yaml文件的外观。

flutter:

 uses-material-design: true

 fonts:
   - family: Indies
   fonts:
     - asset: fonts/IndieFlower-Regular.ttf

访问TextStyle中的字体

style: TextStyle(
      color: Colors.green,
      fontSize: 30.0,
      fontFamily: 'Indies'
),

为了更好地理解,这里的图片显示了字体,pubspec.yaml和输出。

qaxu7uf2

qaxu7uf24#

注意:仅当您喜欢使用fonts.google.com中的字体时才使用此选项

使用谷歌字体最酷、最简单的方法之一就是使用google_fonts_package
适用于Flutter的google_fonts软件包可以让你在Flutter应用中轻松使用www.example.com上的960种字体(及其变体)中的任何一fonts.google.com种。使用google_fonts软件包,.ttf文件不需要存储在assets文件夹中,也不需要Map到pubspec中。相反,它们在运行时通过http获取一次,并缓存在应用的文件系统中。

安装

1.添加到pubspec.yaml

google_fonts: ^0.1.0

1.输入

import 'package:google_fonts/google_fonts.dart';

1.使用您的字体,例如

Text("TestText", style:GoogleFonts.dancingScriptTextStyle(
              fontSize: 25,
              fontStyle: FontStyle.normal,
    )

虽然它提到它不应该在生产中使用,但我看到一个应用程序部署在两个playstoreappstoreTim Sneath和工作完美这里的open source code希望这有帮助

ubof19bj

ubof19bj5#

如果任何人想要更改默认Flutter材质字体或在整个应用程序中使用自定义字体,而不是在特定的小部件中,
首先将下载的字体添加到pubspec.yaml

fonts:
    - family: Outfit
      fonts:
        - asset: fonts/Outfit-Light.ttf
          weight: 300
        - asset: fonts/Outfit-Thin.ttf
          weight: 100
          style: italic

然后在项目的根目录中添加

return MaterialApp(
  title: 'Custom Fonts',
  // Set Outfit as the default app font.
  theme: ThemeData(fontFamily: 'Outfit'),
  home: const MyHomePage(),
);

相关问题