如何在Flutter中使用自定义字体样式？

Question

我已经在我的 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”。怎么做？

谢谢！

- Long Johnson

Answer 1

Roboto是Material样式的默认字体，无需在pubspec.yaml中添加。

要使用不同的变体，请设置TextStyle

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

我认为“thin”是FontWeight.w200。

相应字体样式的FontWeights在GoogleFonts网站上该特定字体的styles部分中提到。

- boformer

---

@boformer，你是怎么知道这个的？你知道半粗体的字重吗？所有标题中带有“-Light”的字体是否都会在指定FontWeight.w300时使用，还是只适用于Roboto字体？ - Jannie Theunissen

不，这是常见的标准：https://cssreference.io/property/font-weight/ - boformer

600半粗体 - boformer

如何使用字体加粗样式？ - Roman Soviak

我如何在iOS平台上使用AvenirNext字体？这种字体在iOS上得到支持，但我需要在资源中声明吗？ - Shinichi

Answer 2

一般来说，您可以直接指定字体样式。 pubspec.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,
    ),
  ),
),

- oblomov

Answer 3

注意：这仅适用于您偏好使用fonts.google.com中的字体

使用Google字体最酷、最简单的方法之一是使用google_fonts_package。

Flutter的google_fonts包允许您轻松地在Flutter应用程序中使用来自fonts.google.com的960种字体及其变体之一。使用google_fonts软件包，.ttf文件不需要存储在您的资产文件夹中并映射到pubspec中。相反，在运行时通过http获取它们，并缓存在应用程序的文件系统中。

安装

1. 添加到pubspec.yaml

google_fonts: ^0.1.0

2. import

import 'package:google_fonts/google_fonts.dart';

使用你的字体，例如：

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

尽管提到不应在生产中使用，但我看到Tim Sneath部署了一个应用程序，并在playstore和appstore上运行得非常完美，这是开源代码，希望对您有所帮助。

- Mahesh Jamdade

Answer 4

正确声明和访问字体。

在pubspec.yaml文件中声明字体路径。

遵循正确的缩进。
例如，我已经将IndieFlower-Regular.ttf文件添加到fonts文件夹中。这是我的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和输出结果。

- Rohit Singh

---

add indent for fonts: - shinriyo

Answer 5

如果有人想要更改默认的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(),
);

- Zia