Variable Font 可變字體完全攻略：用一個字型檔搞定所有網頁排版需求

什麼是 Variable Font？為什麼設計師都該學

如果你還在用傳統的靜態字型（Static Font），那你可能正在浪費使用者的頻寬。想像一下：為了在網頁上呈現 Regular、Bold、Italic 三種樣式，你得載入三個字型檔，每個 40KB——加起來就是 120KB 和三個 HTTP 請求。

可變字體的出現徹底改變了這個遊戲規則。2016 年由 Adobe、Apple、Google、Microsoft 四大巨頭共同推出的 OpenType 1.8 規格，讓一個字型檔案就能包含字重（weight）、字寬（width）、傾斜（slant）、光學尺寸（optical size）等多個可變軸。換句話說，一個 80KB 的檔案就能取代原本需要 200KB 的五個靜態字型。

到了 2026 年，可變字體已經不是什麼新潮技術了——它就是做 UI 排版的標準做法。各大主流瀏覽器早就全面支援，如果你還沒開始用，現在正是最好的時機。

CSS font-variation-settings 實戰語法

使用可變字體的核心 CSS 屬性有兩種：高階屬性和低階屬性。

高階屬性（推薦優先使用）

.heading {
  font-weight: 750;
  font-stretch: 112%;
  font-style: oblique 12deg;
}
.heading:hover {
  font-weight: 900;
  transition: font-weight 0.3s ease;
}

低階屬性（自訂軸必用）

.text {
  font-variation-settings:
    "wght" 375,
    "wdth" 125,
    "GRAD" 88;
}

一個我個人踩過的坑：font-variation-settings 會一次覆寫所有軸的值。所以如果你只想改字重，但忘了寫其他軸，其他軸會回到預設值。這就是為什麼官方建議優先使用高階屬性，只有自訂軸才用 font-variation-settings。

效能比較：Variable Font vs Static Font

• 靜態字型方案：5 個字型檔 × 40KB = 200KB，5 個 HTTP 請求
• 可變字體方案：1 個字型檔 × 80KB = 80KB，1 個 HTTP 請求

省下了 60% 的檔案大小和 80% 的請求數。對行動裝置使用者來說，這個差異非常有感。如果你正在做品牌設計工具的選擇，可變字體的效能優勢也是評估設計系統時的重要考量。

用可變字體做動態排版效果

可變字體最酷的一點是——你可以用 CSS 動畫讓字體「動起來」。

@keyframes breathe {
  0%, 100% { font-weight: 100; font-stretch: 75%; }
  50%      { font-weight: 900; font-stretch: 125%; }
}
.animated-text {
  font-family: 'Inter Variable', sans-serif;
  animation: breathe 3s ease-in-out infinite;
}

這種呼吸效果在標題、Loading 畫面、互動按鈕上都非常吸睛。配合品牌色彩心理學的配色策略，能打造出極具辨識度的視覺語言。

2026 年最推薦的免費可變字體

1. Inter Variable：UI 設計的黃金標準，支援 wght/ital/opsz 三軸
2. Plus Jakarta Sans：幾何風格，很適合科技品牌
3. Noto Sans TC Variable：Google 出品的中文可變字體，終於支援 wght 軸
4. Recursive：支援 MONO/CASL/wght/slnt/CRSV 五軸，超適合程式碼編輯器
5. Source Han Sans Variable：Adobe 思源黑體的可變版本

特別提一下 Noto Sans TC Variable——這對台灣的網頁設計師來說是個大好消息。以前中文字體因為字數太多，很難做成可變格式，但 Google 在 2025 年終於突破了這個限制。

COLRv1 彩色可變字體：下一個趨勢

2026 年還有一個值得關注的方向：COLRv1 彩色字體。這是一種支援漸層、圖層和多色調板的向量化字體格式，而且可以同時是可變的。這在Figma Slides 簡報設計中非常實用。

漸進式增強：安全地使用可變字體

body { font-family: 'Inter', sans-serif; font-weight: 400; }
@supports (font-variation-settings: normal) {
  body { font-family: 'Inter Variable', sans-serif; font-weight: 375; }
}

GRAD 軸：2026 年 UI 字體的隱藏武器

GRAD（Grade）軸可以改變字體視覺粗細，卻不影響排版空間。

.nav-link:hover {
  font-variation-settings: "GRAD" 150;
}

在導航列的 hover 效果上特別好用——完全零版面位移。

總結：現在就開始用可變字體

• 大幅減少字型檔案大小和 HTTP 請求
• 無限細膩的字重/字寬控制
• CSS 動畫實現動態排版
• GRAD 軸帶來零位移的懸停效果
• COLRv1 開啟彩色字體的新可能

如果你今天只做一件事，就去把專案裡的 Inter 換成 Inter Variable 吧。