@font-face 的 CSS size-Adjust

載入網頁字型時，您現在可以調整縮放比例，將文件字型大小正規化，避免切換字型時發生版面配置位移

Adam Argyle

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

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

本文將探討名為 size-adjust 的新 CSS 字型描述符。同時也示範了修正及正規化字型大小的幾種方式，提供使用者更流暢的體驗、一致的設計系統，以及更易預測的網頁版面配置。其中一個重要用途是最佳化網頁字型轉譯，以避免累計版面配置位移 (CLS)。

瀏覽器支援

  • Chrome：92。
  • Edge：92。
  • Firefox：92。
  • Safari：17。

資料來源

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

  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 推出的大小調整計算機。

選擇 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";
}

在本例中，本機字型 one 依預期會載入已載入的自訂字型，以便進行順暢的替換。

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

品牌字體也是 Malte 計算機的目標。選擇 Google 字型後，該工具就會計算如何調整初始化文件，以便順利切換。以下是計算機的 Roboto CSS 範例，其中 會使用 "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：當地目標

請參考以下程式碼片段，根據事記號調整品牌自訂字型：

@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 使用的更精細調整選項。目前在 Chromium 87 以上版本和 Firefox 89 以上版本中實作 ascent-override、descent-override 和 line-gap-override 屬性。

剪刀上方的剪刀，並吹出字詞覆寫效果， 呈現特徵可修剪至的區塊

ascent-override

瀏覽器支援

  • Chrome：87。
  • 邊緣：87。
  • Firefox：89。
  • Safari：不支援。

資料來源

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

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

紅色標題 (未經調整) 的長度超過大寫英文字母 A 和 O，而藍色標題則經過調整，因此上限高度會與整體定界框貼合。

descent-override

瀏覽器支援

  • Chrome：87。
  • Edge：87。
  • Firefox：89。
  • Safari：不支援。

資料來源

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

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

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

line-gap-override

瀏覽器支援

  • Chrome：87。
  • 邊緣：87。
  • Firefox：89。
  • Safari：不支援。

資料來源

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 功能是一種令人興奮的方式，可自訂網頁版面配置的文字邊界框，藉此改善字型切換體驗，進而避免使用者看到版面配置移位。詳情請參考下列資源：

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