@font-face 的 CSS size-Adjust

現在載入網頁字型時，可以調整字型比例，將文件字型大小標準化，並防止切換字型時版面配置發生變化

Adam Argyle

請參考以下示範，其中 font-size 是一致的 64px，而這些標頭之間的唯一差異是 font-family。左側範例未經調整，最終大小不一致。右側範例使用 size-adjust，確保 64px 最終大小一致。

在這個範例中，我們使用 Chrome 開發人員工具 CSS 格線版面配置偵錯工具來顯示高度。

本文將探討新的 CSS font-face 描述元 size-adjust。此外，本文也示範幾種修正及正規化字型大小的方法，可提供更流暢的使用者體驗、一致的設計系統，以及更可預測的網頁版面配置。其中一個重要用途是最佳化網頁字型算繪，避免累計版面配置位移 (CLS)。

Browser Support

• 92
• 92
• 92
• 17

Source

以下是問題空間的互動式示範。請嘗試使用下拉式選單變更字體，並觀察：

1. 結果中的高度差異。
2. 內容位置變動，造成視覺不適。
3. 移動互動式目標區域 (下拉式選單會跳動！)。

重要詞彙： 字型系列與字體：字體是指系列名稱加上字型。Helvetica Bold 是指特定的粗體字型，而 Helvetica 則是一般指稱整個 8+ 字型系列 (一般、粗體、斜體等)。在 CSS @font-face 中，您會處理字體，但要使用字體，您需要編寫 font-family。

如何使用 size-adjust 縮放字型

語法簡介：

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. 建立名為 Adjusted Typeface 的自訂字體。
2. 使用 size-adjust 將每個字符放大至預設大小的 150%。
3. 只會影響單一匯入的字體。

請按照下列方式使用上述自訂字體：

h1 {
  font-family: "Adjusted Typeface";
}

警告： 如果上述示範中的第二個標題未大於第一個標題，表示瀏覽器不支援 size-adjust。

流暢切換字型，降低 CLS

在下方的 GIF 中，請觀察左側的範例，以及變更字型時的變化。這只是單一標題元素的小例子，問題非常明顯。

左側範例有版面配置位移，右側範例則沒有。

字型交換是改善字型算繪效果的絕佳技術。先顯示載入速度快的系統字型，等網頁字型載入完成後再切換。這樣一來，您就能兼顧兩者的優點：盡快顯示內容，並在不犧牲使用者時間的情況下，提供樣式精美的網頁。不過，有時載入網頁字型時，由於方塊高度大小略有不同，整個網頁會隨之移動。

內容越多，字型切換時可能發生的版面配置位移就越多

在 @font-face 規則中加入 size-adjust，即可為字型設定全域字符調整。只要時機得當，視覺變化就會降到最低，達到無縫切換的效果。如要順暢切換，請手動調整或試用 Malte Ubl 的大小調整計算機。

選擇 Google 網路字型，即可取得預先調整的 @font-face 程式碼片段。

在本文開頭，我們是透過反覆試驗來修正字型大小問題。在原始碼中調整 size-adjust，直到 Cookie 和 Arial 中的相同標頭自然呈現與 Press Start 2P 相同的 64px。我將兩種字型調整為目標字型大小。

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

校正字型

作者可決定校正目標，將字型比例正規化。您可以將 Times、Arial 或系統字型正規化，然後調整自訂字型以符合需求。或者，您也可以調整本機字型，使其與下載的字型相符。

size-adjust校準策略：

1. 遠端目標：
   調整本機字型，使其與下載的字型一致。
2. 本機目標：
   根據本機目標字型調整下載的字型。

範例 1：遠端目標

請參考下列程式碼片段，其中會調整本機可用的字型，使其大小與遠端 src 自訂字型相符。遠端自訂字型是校正目標，可能是品牌字型：

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

在這個範例中，本機字型 Arial 會配合預期載入的自訂字型進行調整，以便順暢切換。

這種策略的優點是，設計師和開發人員可以使用相同的字型來調整大小和字體排版。品牌是校正目標。這對設計系統來說是個好消息。

Malte 的計算機也是以品牌字體為目標。選擇 Google Fonts，系統就會計算如何調整 Arial，以便與 Google Fonts 完美互換。以下是計算工具中的 Roboto CSS 範例，其中載入 Arial 並命名為「Roboto-fallback」：

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

警告： font-family 的順序至關重要。這裡會決定順序和優先順序。請確保你最想要的字體排在第一位。此外，local(Arial) 可能不適用於所有使用者的裝置，因此請務必在字型系列中提供多個備用字型。

如要建立完全跨平台的調整，請參閱以下範例，其中提供 2 個調整後的本機備用字型，以預期品牌字型。

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

範例 2：指定地區

請參考下列程式碼片段，其中調整了品牌自訂字型，使其與 Arial 相符：

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

這種策略的優點是，不需調整即可算繪，然後調整任何傳入的字型以符合。

使用 ascent-override、descent-override 和 line-gap-override 進行更精細的調整

如果一般字元縮放功能無法滿足設計或載入策略的需求，可以搭配 size-adjust 使用下列微調選項。ascent-override、descent-override 和 line-gap-override 屬性目前已在 Chromium 87+ 和 Firefox 89+ 中實作。

ascent-override

Browser Support

• 87
• 87
• 89
• 

Source

ascent-override 描述元定義字型基準線上方的高度。

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

紅色標題 (未調整) 的大寫字母 A 和 O 上方有空間，而藍色標題經過調整，因此其大寫高度與整體定界框緊密貼合。

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

descent-override 描述元定義字型基準線下方的高度。

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

紅色標題 (未調整) 的 D 和 O 基準線下方有空間，而藍色標題經過調整，因此字母會緊貼基準線。

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

line-gap-override 描述元會定義字型的行距指標。這是字型建議的行距或外部前導。

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

紅色標題 (未調整) 沒有 line-gap-override，基本上為 0%，而藍色標題則向上調整 50%，因此在字母上方和下方建立空間。

正在統整內容

每項覆寫設定都提供額外方式，可修剪網頁安全文字定界框的多餘部分。你可以調整文字方塊，精準呈現內容。

警告： 如果上述任一示範未顯示差異，表示瀏覽器不支援覆寫。

結論

@font-face size-adjust CSS 功能可讓您自訂網頁版面配置的文字定界框，改善字型切換體驗，避免使用者遇到版面配置位移。如要瞭解詳情，請參閱下列資源：

• CSS Fonts Level 5 規格
• MDN 上的大小調整
• 流暢切換 @font-face 產生器
• web.dev 上的 Cumulative Layout Shift (CLS)
• 降低字型載入影響的新方法：CSS 字型描述元