@font-face 的 CSS size-Adjust

現在載入網頁字型時，您可以調整字型比例，讓文件字型大小維持一致，並避免在切換字型時發生版面配置位移

Adam Argyle

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

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

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

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

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

  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 中，請觀看左側的範例，以及字型變更時的變化。這只是一個小範例，只有一個標題元素，但問題非常明顯。

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

如要改善字型轉譯效果，建議採用字型交換技術。先算繪載入速度快的系統字型來顯示內容，然後在網頁字型載入完成時，將系統字型換成網頁字型。這樣一來，就能結合兩者的優點：內容會盡快顯示，且網頁樣式美觀，不會浪費使用者瀏覽內容的時間。然而，問題在於有時網頁字型載入時，會因呈現的方塊高度略有不同，而導致整個網頁位移。

更多內容表示字型切換時，版面配置位移的可能性更高

在 @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 字型後，系統會計算如何調整 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 搭配運作。目前 Chromium 87 以上版本和 Firefox 89 以上版本已實作 ascent-override、descent-override 和 line-gap-override 屬性。

剪刀，並吹出字詞覆寫，顯示功能可修剪的區域

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

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

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

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

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

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

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 功能可讓您自訂網頁版面配置的文字邊界方塊，改善字型切換體驗，避免使用者遇到版面配置位移問題。如要瞭解詳情，請參閱下列資源：

相片來源：Kristian Strand 發表於 Unsplash