跳到主內容

Flutter 的字型與排版

瞭解 Flutter 對排版的支援。

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

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

字型樣式至少由以下要素定義:字型族 (Typeface),代表描述同一字型家族(例如 RobotoNoto)中通用字元規則的集合;字重 (Font weight)(例如 Regular、Bold 或數值);以及樣式(例如 Regular、Italic 等)。所有這些以及其他預設屬性共同構成了我們所說的靜態字型。

可變字型允許在執行時修改其中一些屬性,並將原本需要多個靜態字型檔案才能實現的效果儲存在一個檔案中。

排版比例

#

排版比例是一套相關的文字樣式,旨在為您的應用提供平衡、連貫性和視覺多樣性。

Flutter 中由 TextTheme 提供的通用排版比例,包含五種用於標識功能的文字類別:

  • 顯示 (Display)
  • 標題 (Headline)
  • 小標題 (Title)
  • 標籤 (Label)
  • 正文 (Body)

此外,每種類別還有三種大小變化:

  • 小 (Small)
  • 中 (Medium)
  • 大 (Large)

這十五種類別與文字大小的組合,每一項都由一個 TextStyle 表示。

Listing of typographical scale for Material TextTheme

Flutter 公開的所有平臺特定排版比例都包含在 Typography 類中。通常情況下,您無需直接引用該類,因為 TextTheme 會根據您的目標平臺自動本地化。

可變字型 (Variable fonts)

#

可變字型允許您控制文字樣式的預定義方面。可變字型支援特定的軸,例如寬度、字重、傾斜度等。使用者在指定字型型別時,可以從連續軸中選擇任何值

使用 Google Fonts 字型測試器

#

Google Fonts 上有越來越多的字型提供可變字型功能。您可以透過使用“字型測試器 (Type Tester)”來檢視可選範圍,並瞭解如何對單個字型進行變體設計。

Demonstration of varying aspects for Noto Sans with Lorem ipsum text

透過即時拖動任意軸上的滑塊,觀察它如何影響字型。在編寫可變字型程式碼時,請使用 FontVariation 類來修改字型的設計軸。FontVariation 類符合 OpenType 字型變數規範

靜態字型

#

Google Fonts 也包含靜態字型。與可變字型一樣,您需要了解字型的設計方式,才能知道可以使用哪些選項。同樣,Google Fonts 網站可以為您提供幫助。

使用 google_fonts 軟體包

#

雖然您可以從網站下載字型並手動安裝到應用中,但您也可以選擇直接使用 pub.dev 上的 google_fonts 軟體包。

它們可以直接透過引用字型名稱來使用:

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

或者透過設定生成的 TextStyle 的屬性來進行自定義:

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

修改字型

#

使用以下 API 以程式設計方式更改靜態字型(但請記住,這僅在字型被設計為支援該功能時才有效):

FontFeature 對應於 OpenType 特性標籤,可以被看作是一個用於啟用或停用給定字型功能的布林標誌。

其他資源

#

下面的影片展示了 Flutter 排版的一些功能,並結合了 Material Cupertino 的外觀與感覺(取決於應用執行的平臺)、動畫以及自定義片元著色器 (fragment shaders)。

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

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