Flutter 的字型和排版

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

所有字型並非生而平等。字型是一個龐大的主題,超出了本網站的範圍,不過,此頁面討論 Flutter 對可變字型和靜態字型的支援。

可變字型

可變字型(也稱為 OpenType 字型),讓您可以控制文字樣式的預先定義面向。可變字型支援特定軸線,例如寬度、粗細、傾斜(僅舉幾例)。使用者在指定字型時,可以在連續軸線上選擇任何值

Example of two variable font axes

不過,字型必須先定義可用的軸線,而這並不總是容易找出。如果您使用的是 Google 字型,您可以使用下一節中所述的字型測試器功能,瞭解可用的軸線。

使用 Google 字型字型測試器

Google 字型網站提供可變字型和靜態字型。使用字型測試器進一步瞭解其可變字型。

  1. 若要調查可變 Google 字型,請前往Google 字型網站。請注意,每個字型卡片的右上角會顯示可變(表示可變字型)或x 種樣式(表示靜態字型支援的樣式數量)。
  2. 若要查看所有可變字型,請勾選僅顯示可變字型核取方塊。
  3. 向下捲動(或使用搜尋欄位)找到 Roboto。這會列出數種 Roboto 可變字型。
  4. 選取Roboto Serif 開啟其詳細資料頁面。
  5. 在詳細資料頁面上,選取字型測試器標籤。對於 Roboto Serif 字型,可變軸線欄位如下所示

Listing of available font axes for Roboto Serif

即時移動任何軸線上的滑桿,查看其如何影響字型。在編寫可變字型程式時,使用FontVariation類別修改字型的設計軸線。FontVariation類別符合OpenType 字型變數規格

靜態字型

Google 字型也包含靜態字型。與可變字型一樣,您需要瞭解字型的設計,才能知道有哪些選項可用。Google 字型網站再次提供協助。

使用 Google 字型網站

使用字型的詳細資料頁面,深入了解其靜態字型。

  1. 若要調查可變 Google 字型,請前往Google 字型網站。請注意,每個字型卡片的右上角會顯示可變(表示可變字型)或x 種樣式(表示靜態字型支援的樣式數量)。
  2. 請確定僅顯示可變字型未勾選,且搜尋欄位為空白。
  3. 開啟字型屬性功能表。勾選樣式數目核取方塊,並將滑桿移至 10+。
  4. 選取字型,例如Roboto,開啟其詳細資料頁面。
  5. Roboto 有 12 種樣式,且每種樣式都會在其詳細資料頁面上預覽,並附上該變體的名稱。
  6. 即時移動像素滑桿,以預覽不同像素大小的字型。
  7. 選取類型測試器標籤,查看字型支援的樣式。在本例中,有 3 種支援的樣式。
  8. 選取字形標籤。這會顯示字型支援的字形。

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

FontFeature 對應到 OpenType 功能標籤,可以視為布林旗標,用於啟用或停用特定字型的功能。下列範例為 CSS,但說明了這個概念

Example feature tags in CSS

其他資源

以下影片展示 Flutter 排版的部份功能,並結合 Material Cupertino 的視覺與感受(視應用程式執行的平台而定)、動畫和自訂片段著色器

使用 Flutter 建立精美的設計原型

若要閱讀一位工程師自訂可變字型並在轉換時為其加入動畫效果的經驗(也是上述影片的基礎),請查看 使用 Flutter 進行趣味排版,這是一篇 Medium 上的免費文章。相關範例也使用了自訂著色器。