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 的外觀和感覺（取決於應用程式執行的平臺）、動畫和自定義片段著色器結合起來

在新的標籤頁中在 YouTube 上觀看：“使用 Flutter 製作精美的原型設計”

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