遷移至 Variable 字型

1. 簡介

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

269e1597309e5d7a.png

使用可變字型，在 UI 中呈現動態變化版本，藉此提升版面配置、主題和無障礙功能的回應速度，同時加快應用程式運作速度！

課程內容

  • 什麼是可變字型。
  • 如何自訂文字類型。
  • 如何在設計中套用可變字型。
  • 如何使用 Google Fonts API 和 CSS 導入可變字型。

必要條件

在本研究室中，我們會運用一些基本設計概念為基礎。

  • 瞭解類型尺度。
  • Figma 相關知識。
  • 具備 HTML 和 CSS 的基本知識。

軟硬體需求

2. 開始操作

設定

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

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

從 Figma 社群複製

前往「遷移至 Variable 字型」檔案，或在 Figma 社群中搜尋「遷移至 Variable 字型」字型。按一下右上角的「複製」，即可將檔案複製到檔案中。

2cb1a5f77aab6012.png

檔案版面配置

瀏覽檔案時，請注意該檔案是自行包含的，開頭是自我介紹。每個章節都劃分成一列相互連結的畫板，含有該章節的某些核心概念，隨後附上練習。部分與練習會彼此相輔相成，且應依序完成。

本程式碼研究室將詳細說明這些概念和練習。跟著程式碼研究室一起閱讀，進一步瞭解 Material You 的新功能。

首先介紹開場畫板，您可以使用各種按鈕依序連結畫板。若要存取連結，請按一下該按鈕。

289defd9d067d2f0.png

檢查變數字型

在開始之前，我們需要先確定字型是可變的！這個檔案使用 Figma 中已有的 Roboto Flex，或可從 fonts.google.com 下載

3. 什麼是可變字型？

變數字型是一種創新的字型格式，可讓使用者控制其類型和圖示。Roboto Serif 和 Roboto Flex 是可變字型技術的全新字體，每種軸都各有各軸。64c74a7d7844423.png

美學運算式和軸

設計人員不再受限於較舊的固定樣式 (例如一般、粗體、斜體等)，而可變字型中的變數是由軸或執行個體控制。如果類型設計人員選擇，類型設計中的任何變數都可以指派給使用者可控制的軸。常見的軸包括斜體、光學大小、斜體、重量、寬度。這五個是 CSS 中已註冊的軸。

優點

可變字型可讓您透過單一字型檔案提供多個樣式，讓網站更具永續發展能力、較小且速度更快，同時讓設計人員更能輕鬆掌控內容的呈現方式。

77346d3812d79acc.png

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

改變軸

以下將逐步說明我們提供的所有參數 (或軸)，以及這些參數的影響。選取右側的類型，開啟「類型詳細資料」互動視窗 (更多圖示)，開啟軸的滑桿，然後瀏覽各個參數。

  1. 「Weight」(權重) 用於定義字母的粗細。它可提供完整的連續粗細範圍。

5f18f2f50f6dc4da.gif

  1. 寬度是字體的水平空間所佔的水平空間，

dddc87cccfcb47f9.gif

  1. 將風格由直立改成傾斜 (又稱「斜方」)。雖然「斜邊」相當罕見，但在其他方向也能運作，稱為「逆向」或「反向跳轉」。

1b7fbf03fcbf16dc.gif

  1. 成績是字體光學權重的次要修飾符，與權重軸無關。「體重」和「成績」都會影響字母的粗細，但透過「成績」調整功能較精細。

35705cb05c8df559.gif

  1. 光學尺寸：透過點指定的方式，根據特定文字大小調整樣式。一般來說，字母尺寸越小，字母越容易閱讀，內容間距/核心粗細，筆劃則較為粗略，較能清晰易讀。字型越大，字母通常適合具有細緻筆劃和更詳細形式，且具有極端粗細和寬度的廣告標題。

ed569d469ebd40d6.gif

觀看 Variable Fonts 示範，瞭解如何在 Figma 外使用可變字型軸。

5. 展現時尚風格

如果您使用的是品牌風格指南，可能會建立固定的字體比例，做為字體排版的限制。使用可變字型並不表示要不放棄這種一致性。這項功能可在單一檔案內，進一步調整字體比例的彈性 (適用於不同用途，例如在深色背景上提高權重)。

ecb7c0b0056fc315.png

雖然輸入比例可包含多個字型系列，但這裡只會使用其中一個選項，自訂 Material Design 預設字體比例的精簡版本。

  1. 現在讓我們開始使用內文文案自訂字體比例。這樣我們就能先設定網站的基礎類型大小，然後視情況進行調整。Body Large 的預設值為 18pt，選取並設為 Roboto Flex。我們為了提高易讀性，而調整字型大小和粗細，這意味著要更新字型大小和字型，而現在我們可以微調部分軸。調整光學大小、坡度和重量。
  2. 繼續設定標籤。標籤較為實用，且用於較短的情境 (例如按鈕) 中。您可以運用 AI 技術調整成績，讓標籤正確顯示在按鈕容器和方塊上。
  3. 持續更新「標題」、「廣告標題」和「多媒體廣告」。這三個項目都適用於短至高的強調文字，例如網頁標題和區段。廣告標題和多媒體廣告因為大小和強調效果更好地呈現結果。可以隨意玩這些軸！
  4. 選取類型後，點選 4 個點並新增 (+)，即可設定文字樣式，確保可重複使用的類型設定保持一致。

您可以使用 Material Design 主題設定建構工具或複製 M3 設計套件，以 Figma 樣式產生預設 Material 輸入比例。

6. 已套用至 UI

設定輸入比例後，即可將其套用至 UI 元素，在程式碼中實作！思考如何運用可變字型來提升清晰度和易讀性。如果您在上一個運動中設定了 Figma 樣式，可以套用這些樣式，然後更新樣式的軸。

18efaa2c7bc6ecac.png

  1. 我們來看看左側的 UI 元素。第一張資訊卡包含植物類型、說明和類別標記，其他資訊卡則說明植物保養說明。植物類型是最強調的，所以使用「headline」。請設為先前設為廣告標題的值。護理資訊卡也有標題，但並非以相同的強調效果，因此請設為「title」。
  2. 植物詳細資訊和指示文案可指派給「人體大型」，並將類別標籤指派給「大型標籤」。
  3. 嘗試不同角色，調整 UI 元素和字體比例，找到最佳平衡點。

f646755b99db0161.png

7. 在程式碼中實作

789408aab925944f.png

在程式碼中導入可變字型的方法，與使用字型傳遞服務載入字型並利用 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

*字型樣式中的傾斜 (斜體) 和斜體 (斜體) 並不可靠。

8. 使用 Google Fonts API 匯入

我們一直只使用 Roboto，但現在也別忘了去看看 Font.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 中設定的規格一致，然後點選「Select this style」(選取這個樣式) 來加入側邊導覽匣。
  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);
}

即可匯入所選字型和樣式集，但使用軸範圍可讓您使用樣式的連續範圍，而非個別樣式。若要達到範圍，請以 .. (例如100..900)。確認您只新增字型滑桿中的範圍，否則字型無法正確載入。

這最適合用於瀏覽器中的動畫轉換和實驗功能，因為這會載入整個範圍並放大下載要求。

9. CSS 變數字型屬性

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

  1. 從廣告標題開始已選取右側面板中的 h1，然後選取頂端的「Inspect」分頁標籤。這會將面板切換至程式碼檢查模式，以便進行開發人員移交作業。程式碼位於最後一部分。
  2. 如果您尚未將格式下拉式選單變更為 CSS，請將格式下拉式選單變更為「CSS」。這裡會列出使用的標準屬性 (font-weight, font-stretch, font-style, font-optical-sizing)，然後列出包含未註冊自訂軸的低階 font-variation-settings。切換至font-variation-settings前，請先使用標準屬性。

Figma 使用 font-variation-settings 設定寬度 (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 上線，敬請期待！