Flutter 的字型與排版

排版 (Typography) 涵蓋了字型或字形的樣式與外觀：它定義了字型的粗細、傾斜度、字元間距以及文字的其他視覺方面。

並非所有字型都是生而平等的。

字型樣式至少由以下要素定義：字型族 (Typeface)，代表描述同一字型家族（例如 Roboto 或 Noto）中通用字元規則的集合；字重 (Font weight)（例如 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 的外觀與感覺（取決於應用執行的平臺）、動畫以及自定義片元著色器 (fragment shaders)。

在 YouTube 新標籤頁中觀看：“使用 Flutter 進行精美設計原型製作 (Prototyping beautiful designs with Flutter)”

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