載入網路字型時,您現在可以調整縮放比例,將文件的字型大小正規化,並避免在切換字型時移動版面配置
請考慮以下示範,其中 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 提供的大小調整計算工具。
在本文開頭,透過試驗和錯誤來修正字型大小問題。系統已在原始碼中微調 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 網站上