改善備用字型

Katie Hempenius

Twitter

摘要

本文將深入介紹字型備用廣告，以及 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 是一種程式庫，會自動產生並插入使用字型指標覆寫的字型備用內容。
• 這個存放區包含 Google Fonts 代管所有字型的字型指標覆寫值。您可以將這些值複製並貼到樣式表中。

背景

備用字型是指尚未載入主要字型，或缺少轉譯網頁內容所需的字符時，所使用的字型。舉例來說，以下 CSS 表示應使用 sans-serif 字型系列做為 "Roboto" 的字型備用。

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

備用字型可用來加快顯示文字的速度 (也就是使用 font-display: swap)。因此，網頁內容在容易理解且更加實用，但過去，這會造成版面配置不穩定，導致版面配置位移，通常是因為網站字型替換掉備用字型時發生。但以下所討論的新 API 可以減少或消除此問題，方法是建立備用字型，而該錶面佔用與網頁字型對應空間相同的空間。

改良的字型備用廣告功能

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

字型指標覆寫的運作方式

引言

字型指標覆寫功能可覆寫字型的氣味、下降和行距：

• Ascent：計算字型字符超過基準線的最遠距離。
• 「離子」是指測量字型字符下方與基準線最下方的距離。
• 行距 (又稱為「導引線」) 可用於測量連續行文字之間的距離。

字型指標覆寫功能可用來覆寫備用廣告字型的風速、下降和行距間距，以便與網路字型的上升、下降和行距相等。因此，網站字型和調整後的備用字型一律會具有相同的垂直尺寸。

字型指標覆寫功能用於樣式表中，如下所示：

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

本文開頭列出的工具可產生正確的字型指標覆寫值。不過，您也可以自行計算這些值。

正在計算字型指標覆寫值

以下方程式會產生指定網路字型的字型指標覆寫。字型指標覆寫的值應以百分比 (例如 105%) 寫入，而非小數。

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

注意：「每 em 單位 (UPM)」是指設計字型時使用的格線大小。雖然還有其他格狀空間，但 1000 (1000x1000 格線) 或 2048 (2048x2048 格線) 目前最受歡迎。瞭解 UPM 時，才能呈現其他指標。舉例來說，視字型的 UPM 是 1000 或 2048 而定，900 遞增代表的意義有極大差異。

以下為 Poppins 字型的字型指標覆寫範例：

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

ascent、descent、line-gap 和 unitsPerEm 的值都來自網路字型的中繼資料。本文下一節將說明如何取得這些值。

讀取字型表

字型的中繼資料 (特別是「字型表」) 包含計算字型指標覆寫值所需的所有資訊。

使用 FontForge 查看字型中繼資料

您可以使用以下工具讀取字型中繼資料：

• fontkit 是專為 Node.js 打造的字型引擎。此程式碼片段說明如何使用 fontkit 計算字型指標覆寫。
• Capsize 是字型大小和版面配置程式庫。Capsize 提供一個 API，可用於取得各種字型指標的相關資訊。
• fontdrop.info 網站可讓您從瀏覽器查看字型表格和其他字型相關資訊。
• Font Forge 是熱門的電腦字型編輯器。查看 ascent、descent 和 line-gap：開啟 Font Info 對話方塊，選取 OS/2 選單，然後選取 Metrics 分頁標籤。查看 UPM：開啟 Font Info 對話方塊，然後選取 General 選單。

注意：某些與字型相關的 JavaScript 程式庫約先將字符繪製到畫布上並測量結果，大約是遞增、下降和線條間隔。不過，相較於直接從字型表格讀取字型指標，這種做法的準確度較低。

瞭解字型表

您可能會注意到，多個指標都指稱「遞增」等概念，例如 hheaAscent、typoAscent 和 winAscent 指標。這是因為不同作業系統採用不同的字型轉譯方法所致：OSX 裝置上的程式通常會使用 hhea* 字型指標，Windows 裝置上的程式通常會使用 typo* (也稱為 sTypo*) 或 win* 字型指標。

注意：更明確地說，如果字型已設定 USE_TYPO_METRICS，Windows 裝置上的程式通常會遵循 typo* 指標的慣例，如果不設定，則會使用 win* 指標。USE_TYPO_METRICS 是一種布林值參數，可讓設計人員在使用 typo* 和 win* 指標之間設定偏好。

視字型、瀏覽器和作業系統而定，系統會使用 hhea、typo 或 win 指標來算繪字型。

	Mac	Windows
Chromium	使用「hhea」資料表中的指標。	如果已設定「USE_TYPO_METRICS」，請使用「typo」資料表中的指標；否則使用「win」資料表的指標。
Firefox	如果已設定「USE_TYPO_METRICS」，系統就會使用「typo」資料表中的指標，否則使用「hhea」資料表中的指標。	如果已設定「USE_TYPO_METRICS」，請使用「typo」資料表中的指標；否則使用「win」資料表的指標。
Safari	使用「hhea」資料表中的指標。	如果已設定「USE_TYPO_METRICS」，請使用「typo」資料表中的指標；否則使用「win」資料表的指標。

如要進一步瞭解字型指標在不同作業系統中的運作方式，請參閱有關垂直指標的文章。

跨裝置相容性

針對絕大多數的字型 (例如 Google Fonts 代管的 90% 代管的字型) 的字型指標覆寫值可安全使用，不必瞭解使用者的作業系統：換句話說，無論 hhea、typo 或 win 指標是否適用，這些字型的 ascent-override、descent-override 和 linegap-override 值都完全相同。這個存放區提供了適用及不適用字型的資訊。

如果使用的字型需要分別對 OSX 和 Windows 裝置使用各組字型指標覆寫，除非能夠根據使用者的作業系統來變更樣式表，否則我們不建議使用字型指標覆寫功能。此外，也不建議使用 size-adjust。

注意：本節說明如何判斷某個字型是否在 OSX 和 Windows 裝置上使用相同的字型指標覆寫值。 首先，請確認字型是否已啟用 USE_TYPO_METRICS。

• 如果啟用 USE_TYPO_METRICS，系統會在 OSX 裝置上使用 hhea 指標算繪字型，在 Windows 裝置上則使用 typo 指標轉譯字型。
• 如要在 OSX 上計算正常行高，請使用以下方程式：(hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm。
• 如要在 Windows 中計算一般行高，請使用以下方程式：(typoAscent + typoDescent + typoLineGap)/unitsPerEm。
• 如果 OSX 和 Windows 的行高相同，您可以在兩個作業系統上使用相同的字型指標覆寫值。
• 如未啟用 USE_TYPO_METRICS，系統會在 OSX 裝置上使用 hhea 指標算繪字型，在 Windows 裝置上則是使用 win 指標。
• 如要在 OSX 上計算正常行高，請使用以下方程式：(hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm。
• 如要在 Windows 中計算一般行高，請使用以下方程式：(winAscent + winDescent)/unitsPerEm。(注意：winLineGap 這類字詞不存在)。
• 如果以下兩個條件都成立，您可以在 OSX 和 Windows 上使用相同的字型指標覆寫值：a) hheaLineGap == 0、b) OSX 和 Windows 的行高。

使用字型指標覆寫設定

字型指標覆寫值是根據網頁字型中繼資料 (而非備用廣告字型) 的測量值計算而得，因此無論用哪個字型做為備用字型，字型指標都會保持不變。例如：

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

大小調整的運作方式

引言

size-adjust CSS 描述元會按比例縮放字型字符的寬度和高度。舉例來說，size-adjust: 200% 會將字型字符調整為原始大小的兩倍，size-adjust: 50% 會將字型字符縮放為原始大小的一半。

size-adjust 本身也有限，用於改善字型備用項。在大多數情況下，備用字型需縮小或稍微放大 (而非按比例調整)，以便與網路字型相符。不過，將 size-adjust 與字型指標覆寫結合，便可讓任一字型在水平和垂直方向上互相吻合。

在樣式表中，size-adjust 的使用方式如下：

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

根據 size-adjust 的計算方式 (如下一節所述)，size-adjust 的值 (以及對應的字型指標覆寫) 會因使用的備用字型而異：

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

注意：字型指標覆寫和 size-adjust 都是以百分比宣告，但這些百分比的定義不同：舉例來說，size-adjust: 10% 會將字型縮放至原始大小的 1/10；ascent-override: 10% 不一定會縮小字型，而是會改變字型的比例 (也就是放大倍率的 10%)。

計算大小調整和字型指標覆寫

以下是計算 size-adjust 和字型指標覆寫值的公式：

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

大部分的輸入內容 (包括邊緣、下降和行距) 都可以直接從網路字型的中繼資料讀取。不過，avgCharacterWidth 需要估算。

概略字元寬度

一般而言，平均字元寬度只能取得約略值，但在某些情況下可以準確計算：例如使用等寬字型，或事先得知文字字串內容時。

注意：字型可以是單邊或固定寬度：在等寬字型中，所有字元的水平空間都相同；在固定寬度字型中，字元的寬度不同。IDE 中經常使用等寬字型，但網路上通常常用的字型不如固定寬度字型。

注意：為了方便說明，本文指的是字符的「寬度」。雖然這個術語的意思並不算錯，但「進步」、「進步寬度」或「水平進展」是常用的字體排版欄位。

計算 avgCharacterWidth 的簡單方法之一，就是擷取所有 [a-z\s] 字元的平均寬度。

Roboto 字符的寬度

不過，將所有字元的權重相等，可能會使常用字母 (例如 e) 的寬度過小，並超重不常用的字母寬度 (例如 z)。

更複雜的方法可以提高準確度，請將字母頻率納入考量，改為計算頻率加權平均寬度為 [a-z\s] 個字元。請參閱這篇文章，瞭解英文文字的字母出現頻率和平均字詞長度的詳細資訊。

英文字母頻率

注意：本文討論如何針對將搭配英文文字使用的字型備用，計算 avgCharacterWidth，但這些概念也適用於其他語言和字元集。我們很想瞭解您如何運用這項技術，在非英文內容中出現自己的經驗。

注意：估算 avgCharacterWidth 的另一種方式是使用 xAvgCharWidth。xAvgCharWidth 是字型的 OS/2 資料表中預先填入的值。不過請注意，這項指標不一定是正確的。例如，在從字型新增或移除字符時，許多字型子設定工具不會更新 xAvgCharWidth。此外，即使 xAvgCharWidth 的計算正確，但近年來計算 xAvgcharWidth 的方法也發生變更：您會發現 xAvgCharWidth 的值會因該字型使用的OS/2 資料表版本而異。

選擇方法

本文討論的兩種方法各有優缺點：

• 如要開始最佳化字型備用項目，建議單獨使用字型指標覆寫功能。雖然這兩種做法比較簡單，但通常十分強大，能夠明顯減少字型相關版面配置的位移程度。

• 不過，如果您想要更精準，且願意做更多工作和測試，加入 size-adjust 會是不錯的做法。如果正確實作，這個方法可以有效排除與字型相關的版面配置位移。

注意：您可能會好奇，為什麼不能只設定固定的 line-height，而不能使用字型指標覆寫值或 size-adjust 就好了。雖然 line-height 有時可以成功用來減少或排除與字型相關的版面配置位移，但我們不建議這麼做。字型指標覆寫和 size-adjust 解決了網路字型/備用字型不符的根本問題：line-height 不會 (line-height 會設定 CSS 線條方塊的高度)。此外，您可能會注意到，使用 line-height 來達成上述目的，比您預期的更複雜。這篇文章概略說明瞭使用 line-height 時須留意的事項。

選擇備用字型

本文所述的技巧仰賴字型指標覆寫和 size-adjust 來轉換廣泛的可用本機字型，而不是嘗試尋找與網頁字型非常接近的本機字型。選擇當地字型時，請特別留意，極少數的字型只能在當地使用，且所有裝置都不含單一字型。

Arial 是 Sans-Serif 字型的建議備用字型，Times New Roman 是 Serif 字型的建議備用字型。不過，這些字型不適用於 Android 裝置 (Roboto 是 Android 唯一的系統字型)。

以下範例使用三種備用字型，確保擴大裝置的涵蓋範圍：指定 Windows/Mac 裝置的備用字型、指定 Android 裝置的備用字型，以及使用一般字型系列的備用字型。

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

注意：還有其他本機字型可用做字型備用，但前提是要知道使用者的作業系統。舉例來說，"Calibri"、"Lucinda Sans" 和 "Impact" 都是在 Windows 上廣泛提供的字型，但不在其他作業系統上。

意見回饋要求

如果您對使用字型指標覆寫功能和 size-adjust 的體驗有任何意見回饋，請與我們聯絡。