混淆：如何在Flutter应用程序中添加自定义字体

Question

混淆：如何在Flutter应用程序中添加自定义字体

4

我知道如何在应用程序中添加自定义字体。但是对于 weight 和 style 感到困惑。

例如，如果我要在应用程序中添加 Montserrat 字体，而我的应用程序的asset文件夹只有 Montserrat-Regular.ttf。因此，在 pubspec.yaml 文件中，我写了以下内容：

 fonts:
    - family: Montserrat
      fonts:
        - asset: asset/fonts/Montserrat-Regular.ttf

在 Text widget 中，我使用了 3 种字体样式：正常、粗体和斜体，它们都能正常工作！

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This is normal font',
              style: TextStyle(
                fontFamily: 'Montserrat',
              ),
            ),
            SizedBox(height: 10),
            Text(
              'This is bold font',
              style: TextStyle(
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(height: 10),
            Text(
              'This is italic font',
              style: TextStyle(
                  fontFamily: 'Montserrat',
                fontStyle: FontStyle.italic
              ),
            ),
          ],
        )

所以，如果普通字体可用于加粗和斜体，则在官方教程中为什么要添加标签呢？请注意，保留html标记。

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

Raleway-Italic.ttf 和 RobotoMono-Bold.ttf 是什么？他们应该只添加常规字体到资源中，然后我想就可以工作了？

另外，在上面的代码中，如果我设置

第一段文本 "fontWeight: FontWeight.w300"
第二段文本 "fontWeight: FontWeight.w500"

我找不到任何区别。

或者

如果我设置

第一段文本 "fontWeight: FontWeight.w600"
第二段文本 "fontWeight: FontWeight.w900"

我也找不到任何区别。

为什么呢，有谁能解释一下吗？

- Govaadiyo

2个回答

1

我有完全相同的问题。Flutter甚至不需要一个斜体.otf文件来渲染斜体样式的文本。这真的很令人困惑。所以我花了一些时间进行了一个小实验：

从Montserrat 48pt Extra-Light Normal生成的Flutter斜体文本与Montserrat 48pt Extra-Light italic.otf文本对比

它们看起来不同！结果显示，Flutter可以自动从当前字体生成一些“斜体样式”的文本。但这并不一定与设计师创建的真正斜体字体文件完全相同。

- Shin Lv

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LgFranco · Accepted Answer

如果您有一个带有变体字体（不同于斜体或粗/中等字体的字体），您可以在同一字体族中定义它们：

  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/roboto/Roboto-Black.ttf
          weight: 900
        - asset: assets/fonts/roboto/Roboto-BlackItalic.ttf
          style: italic
          weight: 900
        - asset: assets/fonts/roboto/Roboto-Bold.ttf
          weight: 700
        - asset: assets/fonts/roboto/Roboto-BoldItalic.ttf
          style: italic
          weight: 700
        - asset: assets/fonts/roboto/Roboto-Italic.ttf
          style: italic
        - asset: assets/fonts/roboto/Roboto-Light.ttf
          weight: 300
        - asset: assets/fonts/roboto/Roboto-LightItalic.ttf
          style: italic
          weight: 300
        - asset: assets/fonts/roboto/Roboto-Medium.ttf
          weight: 500
        - asset: assets/fonts/roboto/Roboto-MediumItalic.ttf
          style: italic
          weight: 500
        - asset: assets/fonts/roboto/Roboto-Regular.ttf
        - asset: assets/fonts/roboto/Roboto-Thin.ttf
          weight: 100
        - asset: assets/fonts/roboto/Roboto-ThinItalic.ttf
          style: italic
          weight: 100

在我的Roboto例子中：

如果您使用Roboto字体族并使用默认字重的文本，则会使用Roboto-Regular.ttf

但是，如果您使用斜体样式，则会使用Roboto-Italic.ttf

我有粗体、中等、细体和每种斜体形式的变体。

这使得字体比软件样式更加精美...

在pubspec.yaml文件中，您可以使用fonts，它可以有一个或多个- family子元素，每个子元素都可以有一个或多个fonts子元素（对于变体，工作方式与css中的font-family: Arial, Helvetica, sans-serif;完全相同）。

fonts可以有一个或多个- asset子元素，它可以具有weight和/或style作为子元素或没有。