Flutter 的字型與排版

排版涵蓋了字型或字型的樣式和外觀：它指定了字型的粗細、字型的傾斜度、字母之間的間距以及文字的其他視覺方面。

所有字型都不是相同建立的。

字型樣式至少由以下部分定義：一種字型，代表同一字型家族中描述字型的通用字元規則集，例如 Roboto 或 Noto；一個字重（例如，常規、粗體或數值）；以及一種樣式（例如常規、斜體等）。所有這些以及附加的預設屬性共同構成了我們所說的靜態字型。

可變字型允許在執行時修改其中一些屬性，並將通常是多個靜態字型儲存在一個檔案中。

排版尺度是一組相關的文字樣式，旨在為你的應用程式提供平衡、凝聚力和視覺多樣性。

Flutter 中常見的排版尺度由 TextTheme 提供，包括五種文字類別，指示其功能

• 顯示
• 標題
• 主標題
• 標籤
• 正文

每種類別還有三種尺寸變體

• 小
• 中
• 大

類別和文字尺寸的這十五種組合中的每一種都由一個 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 的外觀（取決於應用程式執行的平臺）、動畫和自定義片段著色器相結合

要閱讀一位工程師自定義可變字型並使其變形動畫（也是上述影片的基礎）的經驗，請檢視 Medium 上的免費文章 Flutter 中的趣味排版。相關示例還使用了自定義著色器。