改善備用字型

Katie Hempenius
Katie Hempenius
X

摘要

本文將深入探討字型備用方案，以及 size-adjust、ascent-override、descent-override 和 line-gap-override API。這些 API 可讓您使用本機字型，建立與網頁字型幾乎完全相符或完全相符的備用字型字體。這麼做可以減少或消除因字型交換造成的版面配置位移。

如果您不想閱讀本文，以下是一些可立即開始使用這些 API 的工具：

架構工具：

  • @next/font：從 Next 13 開始，next/font 會自動使用字型指標覆寫值和 size-adjust，提供相符的備用字型。
  • @nuxtjs/fontaine：從 Nuxt 3 開始，您可以使用 nuxt/fontaine 自動產生並插入相符的字型備用方案，並插入 Nuxt 應用程式使用的樣式表。

非架構工具：

  • Fontaine：Fontaine 是可自動產生及插入使用字型指標覆寫值的字型備用方案的程式庫。
  • 這個repo包含 Google Fonts 代管的所有字型，以及這些字型的字型指標覆寫值。您可以將這些值複製並貼到樣式表中。

背景

備用字型是指在尚未載入主要字型或缺少用於轉譯網頁內容的字元時，所使用的字型樣式。舉例來說，下方的 CSS 指出應使用 sans-serif 字型系列做為 "Roboto" 的字型備用方案。

font-family: "Roboto" , sans-serif;

備用字型可用於更快速地轉譯文字 (也就是使用 font-display: swap)，因此網頁內容可更早顯示，並且更早可供使用。不過，以往這項做法會導致版面配置不穩定：當備用字型換成網頁字型時，通常會發生版面配置偏移。不過，下文所述的新 API 可讓您建立備用字體，並讓其占用的空間與對應的網路字體相同，藉此減少或消除這個問題。

改善字型備用字型

產生「改善版」字型備用檔案的方法有兩種。較簡單的方法是只使用字型指標覆寫 API。較複雜 (但更強大) 的方法是同時使用字型指標覆寫 API 和 size-adjust。本文將說明這兩種做法。

字型指標覆寫值的運作方式

簡介

字型指標覆寫值可用於覆寫字型的上升、下降和行距：

  • 上昇是指字型字符延伸至基準線上方的最遠距離。
  • Descent 會測量字型字符向下延伸至基準線的最大距離。
  • 行間距 (也稱為「行間距") 是指連續兩行文字之間的距離。