【问题标题】：How to use a custom font style in flutter?如何在颤振中使用自定义字体样式？
【发布时间】：2019-02-07 11:18:16
【问题描述】：

我已经在我的 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”样式。如何做到这一点？

谢谢！

【问题讨论】：

标签： android fonts dart flutter

【解决方案1】：

Roboto 是 Material 风格的默认字体，不需要在 pubspec.yaml 中添加。

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

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

我认为瘦是FontWeight.w200。

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

【讨论】：

@boformer，你怎么知道的？你知道半粗体的重量吗？当您指定 FontWeight.w300 或特定于 Roboto 字体时，是否会使用标题中包含 -Light 的所有字体？
不，这是通用标准：cssreference.io/property/font-weight
600 表示半粗体
如何使用粗体字体样式？
如何在iOS平台上使用字体AvenirNext？ iOS 支持此字体，但我需要在 assets 中声明吗？

【解决方案2】：

注意：这仅适用于您更喜欢使用来自fonts.google.com的字体

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

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

安装

添加到 pubspec.yaml

google_fonts: ^0.1.0

导入

import 'package:google_fonts/google_fonts.dart';

使用您的字体，例如

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

虽然它提到它不应该在生产中使用，但我看到Tim Sneath 在playstore 和appstore 上部署了一个应用程序，并且可以完美运行open source code 希望这会有所帮助

【讨论】：

【解决方案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 和输出。

【讨论】：

为字体添加缩进：

【解决方案4】：

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

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

如果您愿意，您也可以在您的应用程序中使用google fonts。你也可以参考这个flutter fonts tutorial。

【讨论】：

【解决方案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,
    ),
  ),
),

【讨论】：