Flutter 的字体与字体排版

Typography 涵盖字体或字型的风格与外观：它规定字体的粗细、倾斜度、字母间距以及文本的其他视觉方面。

并非所有字体都生而相同。

字体样式至少由 typeface（表示同一字体家族中字体的通用字符规则集合，例如 Roboto 或 Noto）、字重（例如 Regular、Bold 或数值）以及样式（如 Regular、Italic 等）定义。这些以及额外的预设属性共同构成我们所说的静态字体。

可变字体允许在运行时修改其中部分属性，并将通常需要多个静态字体文件的内容存储在单个文件中。

字体排版比例尺是一组相关的文本样式，用于在应用中提供平衡、一致性和视觉多样性。

Flutter 中由 TextTheme 提供的常见字体比例尺包括五个表示功能的文本类别：

• 展示（Display）

• 标题（Headline）

• 题头（Title）

• 标签（Label）

• 正文（Body）

每个类别还有三种尺寸变体：

• 小（Small）

• 中（Medium）

• 大（Large）

这十五种类别与文本尺寸的组合各由一个 TextStyle 表示。

Flutter 暴露的所有平台特定字体排版比例尺都包含在 Typography 类中。通常你不需要直接引用该类，因为 TextTheme 会针对你的目标平台进行本地化。

可变字体 允许你控制文本样式的预定义方面。可变字体支持特定轴，例如宽度、字重、倾斜度（仅举几例）。用户在指定字体时可以选择连续轴上的_任意值_。

Google Fonts 上越来越多的字体提供可变字体功能。你可以使用 Type Tester 查看可选范围，并了解如何变化单一字体。

实时移动任一轴上的滑块，查看它如何影响字体。在编程使用可变字体时，使用 FontVariation 类修改字体的设计轴。FontVariation 类符合 OpenType 字体变量规范。

Google Fonts 也包含静态字体。与可变字体一样，你需要了解字体的设计方式才能知道有哪些可用选项。同样，Google Fonts 网站可以提供帮助。

虽然你可以从网站下载字体并手动安装到应用中，你也可以选择直接使用 pub.dev 上的 google_fonts 包中的主题。

只需引用字体名称即可直接使用：

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(),
),

或者通过在生成的 TextStyle 上设置属性进行自定义：

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.displayLarge,
    fontSize: 48,
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

使用以下 API 以编程方式修改静态字体（但请记住，这仅在字体_设计为_支持该功能时才有效）：

• FontFeature 用于选择字形

• FontWeight 用于修改字重

• FontStyle 用于斜体

• FontVariation 用于为特定属性指定取值范围。

FontFeature 对应 OpenType 特性标签，可视为启用或禁用给定字体某项特性的布尔标志。

以下视频展示了 Flutter 字体排版的部分能力，并结合 Material 与 Cupertino 外观（取决于应用运行的平台）、动画以及自定义片段着色器：

Watch on YouTube in a new tab: "Prototyping beautiful designs with Flutter"

要阅读一位工程师定制可变字体并在变形时为其添加动画的经验（也是上述视频的基础），请查看 Medium 上的免费文章 Playful typography with Flutter。相关示例还使用了自定义着色器。