載入網路字型時，您現在可以調整縮放比例，將文件的字型大小正規化，並避免在切換字型時移動版面配置
請考慮以下示範，其中 font-size 是一致的 64px，且每個標頭之間唯一的差異為 font-family。左側的範例尚未調整，且最終大小不一致。右側的範例使用 size-adjust，確保 64px 是一致的最終大小。
本文將探索名為 size-adjust 的新的 CSS 字型描述元。它還示範了一些修正字型大小和正規化方法的方法，以便提供更順暢的使用者體驗、一致的設計系統，以及更易於預測的頁面版面配置。其中一個重要用途是最佳化網頁字型轉譯，避免累計版面配置位移 (CLS)。
如需問題空間的互動式示範，試著使用下拉式選單變更字體，然後觀察：
- 結果中的高度差異。
- 視覺上突然出現內容位移。
- 移動互動式目標區域 (下拉式選單會跳動！)。
如何使用 size-adjust 縮放字型
語法簡介：
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
- 建立名為
Adjusted Typeface的自訂字體。 - 使用
size-adjust將每個字符擴充至預設大小的 150%。 - 只會影響單一匯入的字體。
使用上述自訂字體，如下所示：
h1 {
font-family: "Adjusted Typeface";
}
透過流暢的字型交換減少 CLS
請觀看下方 GIF 中的範例，並瞭解字型變更時會發生什麼變化。以上只是一個廣告標題元素的小型範例，這個問題會非常明顯。
如要改善字型轉譯品質，有個絕佳技巧是切換字型。算繪快速載入的系統字型以先顯示內容，然後在網路字型載入完畢後，將其切換為網頁字型。這樣做可以同時滿足上述兩種情況：但問題是，有時網頁字型會在載入時移動整個網頁，因為網頁顯示的方塊高度稍有不同。
只要將 size-adjust 放在 @font-face 規則中，即可為字型設定全域字符調整。正確的時間點會減少視覺變化，並順暢切換。如要建立流暢切換，請手動調整或使用 Malte Ubl 提供的大小調整計算工具。
@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');
}
正在校正字型
由作者決定正規化字型大小的校正目標。不妨將時間、父親或系統字型進行正規化，然後配合需求調整自訂字型。也可以根據下載的內容調整本機字型。
size-adjust 校正的策略：
- 遠端目標：
根據已下載的字型調整本機字型。 - 本機目標：
根據本機目標字型調整下載的字型。
範例 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";
}
在這個範例中，本機字型接下來會調整，以預期載入的自訂字型，以便順暢地替換。
這項策略的優點在於，為設計人員和開發人員提供相同的字型和字體排版。品牌是校正目標這對設計系統來說是好消息。
並以品牌字體做為目標，這也是 Malte 計算機的運作方式。選擇 Google 字型後，系統就會計算如何調整 FHIR，確保與所選字型完美搭配。以下是計算機中的 Roboto CSS 範例，其中已載入 FHIR，命名為「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 搭配使用。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 功能，即可自訂網頁版面配置的文字定界框，改善字型替換體驗，避免使用者版面配置位移。請參閱下列資源：
相片來源：Kristian Strand 於 Unsplash 網站上