Flutter 的字体和排版

排版 涵盖了字体或字体的样式和外观：它指定了字体的粗细、倾斜度、字母之间的间距以及文本的其他视觉方面。

并非所有字体都是相同的。

字体样式至少由字体定义，字体代表描述相同字体系列中字体的通用字符规则集，例如Roboto或Noto，字体粗细（例如，常规、粗体或数值），以及样式（例如常规、斜体等）。所有这些以及其他预设属性共同构成了我们所说的静态字体。

可变字体允许在运行时修改其中一些属性，并将通常情况下多个静态字体存储在一个文件中。

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

Flutter 中提供的常用类型比例尺（由TextTheme提供）包括五类文本，指示其功能

• 显示
• 标题
• 标题
• 标签
• 正文

每种类型还有三种尺寸变化

• 小
• 中
• 大

这十五种类别和文本大小的组合中的每一个都由单个TextStyle表示。

Flutter 公开的平台特定的排版比例尺都包含在Typography类中。通常，您不需要直接引用此类，因为TextTheme将本地化为您的目标平台。

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

Google Fonts 上越来越多的字体提供了一些可变字体功能。您可以使用字体测试器查看选项范围，并了解如何改变单个字体。

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

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

虽然您可以从网站下载字体并将其手动安装到您的应用程序中，但您可以选择直接从google_fonts插件（位于pub.dev上）使用主题。

只需引用字体名称即可按原样使用它们

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 的外观（取决于应用程序运行的平台）、动画和自定义片段着色器相结合

使用 Flutter 原型设计精美设计

要阅读一位工程师自定义可变字体并对其进行动画处理（使其变形，并成为上述视频的基础）的经验，请查看使用 Flutter 进行有趣的排版，这是一篇免费的 Medium 文章。相关示例还使用了自定义着色器。

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-09-26。 查看源代码 或 报告问题。