@font-face 的 CSS size-Adjust

當網頁字型載入時，您現在可以調整其縮放比例，以便將文件字型大小標準化，並避免在切換字型時版面配置產生位移

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

本文將探討名為 size-adjust 的新 CSS 字型描述符。這篇文章也將說明幾種修正及標準化字型大小的方法，以提供更流暢的使用者體驗、一致的設計系統和更可預測的頁面版面配置。其中一個重要用途是最佳化網頁字型轉譯，以防發生累積版面配置位移 (CLS)。

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

1. 結果中的高度差異。
2. 視覺上令人不舒服的內容轉換。
3. 移動互動式目標區域 (下拉式選單會跳動)。

如何使用 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";
}

透過無縫字型切換降低 CLS

在下列 GIF 中，請觀看左側的範例，以及在變更字型時如何轉換。這只是一個簡單的範例，只有一個標題元素，而且問題非常明顯。

字型互換是改善字型算繪的絕佳技巧。先算繪快速載入的系統字型，以便先顯示內容，然後在網站字型載入完成後，將其換成網站字型。這樣一來，您就能同時享有兩種做法的優點：使用者能盡快看到內容，您也能獲得設計精美的網頁，而不會犧牲使用者瀏覽內容的時間。不過，有時在載入網頁字型時，由於字型顯示的框架高度略有不同，因此會導致整個網頁位置偏移。

將 size-adjust 放入 @font-face 規則，即可為字型樣式設定全域字形調整。如能掌握正確的時間點，就能減少視覺變化，讓轉換過程更流暢。如要建立無縫交換，請手動調整或試試 Malte Ubl 的這個大小調整計算器。

在本篇文章的開頭，我們是透過不斷嘗試來修正字型大小問題。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 會在預期載入自訂字型時進行調整，以便無縫切換。

這種做法的好處是，設計人員和開發人員可使用相同的字型來調整字型大小和排版。品牌是校準目標。這對設計系統來說是好消息。

馬爾特的計算機也是以品牌字體做為目標。選擇 Google 字體後，系統會計算如何調整 Arial，以便與該字體無縫切換。以下是 計算機 的 Roboto CSS 範例，其中 Arial 已載入並命名為「Roboto-fallback」：

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: 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

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

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

紅色標題 (未調整) 的 A 和 O 上方有空白，而藍色標題已調整，因此大寫字母高度可與整體邊界框緊密配合。

descent-override

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

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

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

line-gap-override

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 字型第 5 級規格
• 在 MDN 上調整大小
• 流暢切換 @font-face 產生器
• web.dev 上的累計版面配置位移 (CLS)
• 新方法可減少字型載入影響：CSS 字型描述符

相片來源：Kristian Strand 在 Unsplash 網站上提供