遷移至 Variable 字型

1. 簡介

上次更新時間：2022 年 5 月 11 日

269e1597309e5d7a.png

採用可變字型，讓 UI 支援動態變化，進一步提升版面配置、主題和無障礙功能的反應速度，同時加快應用程式速度！

課程內容

  • 什麼是變數字型。
  • 如何使用這些字體自訂文字。
  • 如何將變數字型套用至設計。
  • 如何透過 Google Fonts API 和 CSS 導入可變字型。

必要條件

本實驗室建立在以下基礎設計概念上：

  • 瞭解字體比例。
  • Figma 相關知識。
  • 具備 HTML 和 CSS 的基礎知識。

軟硬體需求

2. 開始操作

設定

如要開始操作，請先存取這個 Designlab Figma 檔案。本研究室所需素材都在這個 Figma 檔案當中。您可以下載並匯入這個檔案，或從 Figma 社群複製。

首先，登入 Figma 或建立帳戶。

從 Figma 社群複製

前往「Migrating to Variable fonts」檔案，或在 Figma 社群內搜尋「Migrating to Variable fonts」。按一下右上角的「複製」，將檔案複製到你的檔案中。

2cb1a5f77aab6012.png

檔案版面配置

瀏覽檔案時，您會發現這個檔案內容獨立完整，開頭是簡介。每個章節都劃分成一列相互連結的畫板，含有該章節的某些核心概念，隨後附上練習。章節和練習彼此相輔相成，因此應該依序完成。

本程式碼研究室會逐步詳細說明這些概念和練習。請參閱程式碼研究室，進一步瞭解 Material You 新功能。

從「Intro」畫板開始，有數個依序連結畫板的按鈕。按一下按鈕即可存取連結。

289defd9d067d2f0.png

檢查變數字型

開始之前，請先確認我們有可變字型！這個檔案使用 Roboto Flex，Figma 中已提供此字型，您也可以從 fonts.google.com 下載

3. 什麼是變數字型？

可變字體是創新的全新字體格式，可讓使用者控管字體和圖示。Roboto Serif 和 Roboto Flex 是專為可變字型技術設計的新字體，各有許多軸。64c74a7d7844423.png

美學表現和軸

設計師不再受限於舊版硬性設定的樣式，例如一般、粗體、斜體等。可變字型中的變數是由軸或例項控制。如果類型設計師選擇這麼做，類型設計中的任何變數都可以指派給使用者可控制的軸。常見的軸包括斜體、光學尺寸、傾斜度、粗細和寬度。這五個是 CSS 中已註冊的軸。

優點

可變字型可讓您在單一字型檔案中提供多種樣式，讓網站更具永續性、更小、更快，並讓設計師享有更大的表現控制權。

77346d3812d79acc.png

4. 在設計中使用變數字型

變更軸

讓我們逐步瞭解所有可用參數 (或軸) 及其效果。選取右側的字體，然後開啟「字體詳細資料」強制回應 (更多圖示)，開啟軸滑桿並逐一檢查每個參數。

  1. 粗細：定義字母的粗細程度。提供完整且連續的筆觸粗細範圍。

5f18f2f50f6dc4da.gif

  1. 寬度是指字體字元占用的水平空間。

dddc87cccfcb47f9.gif

  1. 將樣式從直立調整為傾斜，這也是排版人員所稱的「斜體」樣式。雖然不常見，但 Slant 也可以反向運作，稱為「反斜體」或「反向斜體」樣式。

1b7fbf03fcbf16dc.gif

  1. 等級是字體光學粗細的次要修飾符，與「粗細」軸無關。「粗細」和「等級」都會影響字母的粗細，但「等級」的調整幅度更細微。

35705cb05c8df559.gif

  1. 光學尺寸：根據以點為單位指定的特定文字大小調整樣式。在較小的尺寸下，字母通常會經過最佳化，以提高可讀性，並採用較寬鬆的間距/字元間距，以及較粗的筆觸，減少細節。在較大的尺寸下，字母通常會針對標題進行最佳化，筆觸較細，形式更詳細，權重和寬度也更極端。

ed569d469ebd40d6.gif

如要在 Figma 以外使用變數字型軸，請參閱變數字型試用版。

5. 提升風格

如果您使用品牌樣式指南，可能已建立字體比例，可做為字體排版限制的參考依據。使用可變字型並不代表要捨棄這項一致性。在單一檔案中，進一步微調字體比例的彈性 (適用於在深色背景上增加等級權重等用途)。

ecb7c0b0056fc315.png

字體比例可包含多個字型系列，但這裡只會使用一個，自訂 Material 預設字體比例的精簡版。

  1. 首先，我們從內文開始自訂字體比例。這樣我們就能先設定網站的基本字體大小，然後再從該處進行光學調整。「Body Large」的預設值為 18pt，選取並設為「Roboto Flex」。過去為了提升易讀性，必須更新字型大小和粗細，也就是使用另一個字型檔案，但現在我們可以微調部分軸。調整光學大小、等級和粗細。
  2. 繼續使用「標籤」。標籤更具實用性，適用於較短的內容，例如按鈕。以光學方式調整等級，讓標籤在按鈕容器和方塊上正確顯示。
  3. 繼續使用「名稱」、「標題」和「顯示」進行調整。這三種字體都適用於較短的中高強調文字，例如頁面標題和區段。廣告標題和顯示會以較大的尺寸顯示，並受到高度重視，因此可以更具表現力。歡迎在此隨意調整所有軸！
  4. 選取類型後，按一下 4 個點並新增 (+)，即可設定文字樣式，確保可重複使用的類型設定一致。

您可以使用 Material Theme Builder，或複製 M3 設計套件，以 Figma 樣式產生預設的 Material 字體比例。

6. 已套用至 UI

設定字體比例後，我們將其套用至 UI 元素，以便在程式碼中實作！考慮如何使用可變字型，增加表現力和可讀性。如果您在上次練習中設定了 Figma 樣式，可以套用這些樣式，然後更新樣式的軸。

18efaa2c7bc6ecac.png

  1. 請查看左側的 UI 元素。第一張資訊卡包含植物類型、說明和一些類別標籤，其餘資訊卡則說明植物照護說明。植物類型適合做為高強調角色，因此請使用「標題」樣式。將其設為先前設定的廣告標題。照護資訊卡也有標題，但並非重點，因此請將其設為「title」。
  2. 植物詳細資料和說明文字可指派給「Body large」，類別標籤則指派給「Label large」。
  3. 嘗試不同的角色，並調整 UI 元素和型別比例，找出適當的平衡。

f646755b99db0161.png

7. 在程式碼中導入

789408aab925944f.png

在程式碼中透過 CSS 實作可變字型的方法，與使用字型傳送服務載入字型，並透過 CSS 屬性自訂字型的任何網頁字型類似。

我們會使用基本 HTML 和 CSS 進行實作，而非 MWC 或任何架構。

Google Fonts 的變數字型

使用 Google Fonts 做為字型傳送服務，即可在網站上輕鬆導入各種字型，包括可變字型！

如要查看可用的可變字型，請前往 fonts.google.com。在搜尋欄下方勾選「只顯示可變字型」，即可篩選。可變字型在頁面底部附近提供遊樂場，您可以在其中為字型系列中可用的每個軸設定滑桿。

9ecb4721afd8faa2.png

使用 CSS 設定樣式

並非所有字型都有相同數量的軸可供自訂。目前最常見的屬性是粗細、寬度、傾斜度、斜體和光學尺寸。

這些屬性可使用變數字型推出前就有的基本 CSS 字型屬性設定。雖然尚未廣泛支援所有項目 (截至 2022 年 5 月)，但您可以使用新屬性 font-variation-settings 穩定設定所有軸。

Axes

Abbreviation

CSS property

Weight

wght

font-weight

Width

wdth

font-stretch

Slant

slnt

font-style*

Italic

ital

font-style*

Optical Size

opsz

font-optical-sizing

*字型樣式中的「斜體」(slnt) 和「義大利體」(ital) 並不可靠。

8. 使用 Google Fonts API 匯入

我們一直只使用 Roboto，但現在 fonts.google.com 上有各種字型可供選擇。

在接下來的程式碼研究室中，我們將繼續使用 Roboto，並根據先前的練習，自訂下列資訊卡中的字體。

  1. 將含有卡片範例 UI 的這段程式碼，複製到您選擇的網頁 IDE。
<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>
  1. 請記下我們在上次練習中為廣告標題、名稱、內文和標籤設定的樣式規格。請記住這些事項，然後前往 Roboto Flex 的頁面。將滑桿設為與 Figma 中設定的規格相符，然後為每個規格選取這個樣式，即可新增至側邊抽屜。
  2. 在導覽匣中，選取樣式下方會顯示「在網路上使用」，將字型新增至程式碼的方式有兩種：使用 <link> 或 @import。我們只需要一個，請選取 @import。
  3. 複製從 @import 到半形分號的內容，然後貼到匯入註解後的樣式標記內。
  4. 由於只會使用 Roboto Flex 字型，請新增匯入程式碼中包含的「指定字型系列的 CSS 規則」，將主體設為呼叫字型系列。
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

這樣做會匯入所選字型和樣式集，但使用 Axis 範圍可讓您使用連續範圍的樣式，而非個別樣式。如要建立範圍，請以「..」連結兩個值 (例如 100..900)。請務必只新增字型滑桿中存在的範圍，否則字型無法正常載入。

這最適合用於流暢的動畫轉場效果，以及在瀏覽器中進行實驗，因為這會載入完整範圍，並使下載要求變大。

9. CSS 變數字型屬性

匯入字型後，請返回 Figma 擷取一些 CSS 屬性來設定樣式，並查看 font-variation-settings CSS 屬性。

  1. 從右側面板中選取開頭的h1標題，然後選取頂端的「檢查」分頁標籤。這會將面板切換為程式碼檢查模式，以利開發人員交接。程式碼是最後一個部分。
  2. 如果尚未變更格式，請將下拉式選單設為 CSS。如果使用標準屬性，系統會列出這些屬性 (font-weight, font-stretch, font-style, font-optical-sizing)，然後列出包含未註冊自訂軸的低階 font-variation-settings。請先使用標準屬性，再改用 font-variation-settings。

Figma 會使用字型變體設定的寬度 (wdth)，而非字型延展。

62fbb715711beb75.png

  1. 複製與型別相關的 CSS 程式碼，為 h1 選取器設定樣式。
h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}
  1. 你可以將照護卡片標題的樣式複製到 h2。對內文執行相同操作，並複製到 p。標籤樣式可以複製到 .label

73252104c94e2053.png

10. 恭喜

62930ad88ed65971.png

您很棒，不僅採用了可變字型，還學會在設計中使用這類字型，並在網頁上實作。

如有任何疑問，歡迎隨時透過 Twitter 上的 @MaterialDesign 提問。

更多設計內容和教學課程即將在 youtube.com/MaterialDesign 上線，敬請期待！