正确声明并访问字体。

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”。该怎么做？

谢谢！

Answer 1

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

要使用不同的版本，请设置TextStyle

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

我认为FontWeight.w200很薄。

Answer 2

注意：仅当您更喜欢使用fonts.google.com

中的字体时，

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

Flutter的google_fonts软件包可让您轻松使用以下任何一种您fonts.google.com中的960种字体（及其变体） Flutter应用程序。使用google_fonts软件包时，.ttf文件不需要可以存储在您的资产文件夹中并映射到pubspec中。代替，它们在运行时通过http提取一次，并缓存在应用程序的文件系统。

安装

添加到pubspec.yaml

quint32 val = ntohl(*((const quint32 *)ba.data()));

导入

google_fonts: ^0.1.0

使用您的字体，例如

import 'package:google_fonts/google_fonts.dart';

尽管它提到不应在生产环境中使用它，但是我看到playstore在appstore和Tim Sneath上都部署了一个应用程序，并且很好地满足了open source code的希望这有帮助

Answer 3

正确声明并访问字体。

在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和输出。

Answer 4

您可以使用TextStyle小部件在flutter应用程序中显示任何自定义字体。

Text( “Home”, style: TextStyle(fontFamily: ‘Roboto-Light’))

如果需要，您也可以在应用程序中使用google fonts。您也可以参考此flutter fonts tutorial。

Answer 5

一般情况下，您可以直接指定字体样式。

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

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

5 个答案:

安装

正确声明并访问字体。