掌握網路字型優化權威指南

網頁字型在網頁開發中至關重要，這不僅是因為字型的設計，還因為字型對網頁效能的影響。在使用字型時如果不考慮效能問題，可能會導致許多問題，如降低網頁速度和暫時以不可見形式顯示字型。本文將介紹如何使用字型獲得最佳效能。

當我們聽到網頁字型時，通常會想到設計方面。網頁設計師和開發人員經常會考慮不同字型設計的特質及其適用範圍。但我們很少考慮網路字型所帶來的效能方面的問題。

本指南將從效能的角度來審視網路字型。您將瞭解到：

網路字型的型別。
網路字型為何重要。
與自定義網路字型相關的效能挑戰。
網頁字型優化策略。
測試網頁字型效能的工具。

網路字型型別

我們有三種主要的網路字型：

系統字型

預裝在裝置或作業系統中。
無需下載額外的字型檔案，因此效能最佳。
當效能是重中之重時，應使用系統字型。

常見的系統字型有 Helvetica、Futura、Garamond 等。

網路安全字型

可在網路上安全使用，因為它們在各種裝置、瀏覽器和平臺上都得到廣泛支援。
允許您在所有瀏覽器和裝置上提供一致的排版。
不會像系統字型那樣帶來效能挑戰。
當自定義字型因效能問題無法載入時，它們通常被用作後備字型。

常見的網路安全字型有 Helvetica、Times New Roman、Georgia 等。

自定義字型

未預先安裝在使用者裝置或作業系統上。
從本地網路伺服器或第三方服務（如 Adobe Typekit 或 Google Fonts）外部載入。
提供廣泛的排版，允許設計靈活自由。

網路字型為何重要

乍一看，網路字型似乎只是一種排版，並不重要。然而，網路字型在我們的網站中發揮著更重要的作用。其中一些作用如下：

美觀：網頁字型有助於建立有吸引力的網頁介面。這樣做可以讓人對品牌或產品產生好感。
品牌塑造：定製字型允許品牌在其離線品牌標識中保持相同的排版。這將提高品牌知名度和使用者信任度。
使用者體驗：經過優化的網頁字型可以提高頁面速度和內容呈現效果。這些改進反過來又會提升使用者體驗。

雖然系統字型隨處可見，但它們通常無法為網站提供所需的品牌形象。系統字型缺乏廣泛的選擇和定製選項。

定製字型可以解決這個問題，因為它們可以提供多種排版方式。遺憾的是，這種多樣性是以效能為代價的。未經優化的自定義字型可能會影響頁面載入和內容呈現。

本文的重點是解決與使用自定義字型相關的效能問題。

與自定義網路字型相關的效能挑戰

您必須考慮以下幾個問題。

降低網頁載入速度

網頁上附加的每個自定義字型檔案都會導致額外的檔案下載。這會降低頁面速度，因為瀏覽器必須先下載字型，然後才能將其呈現在頁面上。

此外，自定義字型檔案大小比系統字型大。這也會導致頁面載入速度變慢。

渲染阻塞

自定義網頁字型屬於渲染阻塞資源。渲染阻塞資源是妨礙頁面快速載入的元素。這是因為瀏覽器必須在呈現頁面之前獲取並處理這些資源。

如果自定義字型沒有經過優化，處理這些字型就會造成延遲，讓使用者感到失望。其他妨礙呈現的資源包括 JavaScript 和 HTML 檔案。

這張來自 7Eagles 的圖片提供了直觀的說明。

渲染阻塞

在上圖中，字型檔案的存在阻礙了頁面載入過程。字型檔案的下載、解析和執行時間會延遲內容的呈現。這會降低頁面速度，影響使用者體驗。

FOUT 和 FOIT

FOUT（Flash of unstyled text）和 FOIT（Flash of Invisible Text）是使用自定義網路字型時常見的問題。

當瀏覽器在將頁面內容更改為自定義字型之前以備用字型顯示時，就會出現 FOUT。這會導致文字外觀發生可觀察到的變化（或閃爍）。

FOIT 會以不可見的形式顯示文字，直到自定義字型載入完畢。FOUT 和 FOIT 都不利於使用者體驗。

請看 Malthe Milthers 提供的圖片。

FOUT 和 FOIT

在上圖中，在以自定義字型顯示文字之前，

FOIT（左側）以不可見形式顯示文字。
FOUT（右側）顯示的是後備字型。

因此，在獲得首選自定義字型之前會有明顯的延遲。

第三方服務提供商

使用第三方自定義字型服務，如 Google Fonts（如下圖所示），會使網站效能依賴於該服務。

Google Fonts

例如，如果您的服務提供商出現故障，您的字型可能無法使用或出現 FOIT/FOUT 問題。

網路字型優化策略

以下策略將幫助您優化網路字型的效能：

選擇正確的字型

為網頁專案選擇合適的字型取決於設計目標。如果效能是唯一優先考慮的因素，請使用系統字型或網路安全字型。這樣可以省去額外的優化工作，因為它們不需要下載額外的檔案。

相反，如果除了效能之外，美觀和品牌也很重要，那麼就使用自定義字型。

你可以像這樣在 CSS 中宣告你所選擇的網路字型。

/* Use the @font-face rule to define your custom fonts */

@font-face {

font-family: 'CustomFont';

src: url('customfontfilename.woff2') format('woff2'); /* Specifies the font file path and the format */

}

/* Apply your custom font to elements or selectors */

h1 {

font-family: 'CustomFont';

}

/* For system fonts or web-safe fonts, just apply the font directly */

h1 {

font-family: Garamond;

}

/* Use the @font-face rule to define your custom fonts */ @font-face { font-family: 'CustomFont'; src: url('customfontfilename.woff2') format('woff2'); /* Specifies the font file path and the format */ } /* Apply your custom font to elements or selectors */ h1 { font-family: 'CustomFont'; } /* For system fonts or web-safe fonts, just apply the font directly */ h1 { font-family: Garamond; }

/* Use the @font-face rule to define your custom fonts */
@font-face {
font-family: 'CustomFont';
src: url('customfontfilename.woff2') format('woff2'); /* Specifies the font file path and the format */
}
/* Apply your custom font to elements or selectors */
h1 {
font-family: 'CustomFont';
}
/* For system fonts or web-safe fonts, just apply the font directly */
h1 {
font-family: Garamond;
}

上述程式碼顯示，@font-face 規則定義了自定義字型。這樣，您就可以將其應用到 HTML 元素或 CSS 選擇器中。

請注意，您必須始終用單鉤或雙鉤來封裝自定義字型名稱，即 'CustomFont' 或 'CustomFont'，而不是 'CustomFont'。

使用字型子集

字型子集是一種只將網頁上使用的字元包含在字型檔案中的技術。這樣做可以減小字型檔案大小，提高頁面載入速度。

Font Squirrel’s Webfont Generator 和 Glyphhanger 等工具可以自動生成字型子集。這些工具通常通過請求您的原始字型檔案來工作，然後進行轉換，為您的專案提供字型子集檔案。

Font Squirrel's Webfont Generator

上圖顯示了 Font Squirrel 工具的工作原理。上傳字型後，選擇最佳設定以獲得最佳速度和效能，然後下載字型。

設定後備字型

指定後備字型可以讓你在自定義字型無法載入時決定顯示的字型。

請始終使用風格和大小與自定義字型相似的網路安全字型。這有助於在自定義字型不可用時保持所需的外觀。

/* Every font after the custom font is a fallback font */

p {

font-family: 'CustomFont', Arial, sans-serif;

}

/* Every font after the custom font is a fallback font */ p { font-family: 'CustomFont', Arial, sans-serif; }

/* Every font after the custom font is a fallback font */
p {
font-family: 'CustomFont', Arial, sans-serif;
}

在上述 CSS 宣告中，如果 customFont 無效，則將顯示 Arial。如果 Arial 也不起作用，那麼 serif 將取而代之。使用通用系列字型作為最後退路的目的在於，它永遠不會失效。

預載字型

預載字型是防止出現 FOUT 或 FOIT 的有效策略。在 <link> 標籤上使用 preload 功能可指示瀏覽器將字型視為最優先順序，並在頁面載入過程中首先獲取該字型。

下面是實現它的程式碼。

<head>

</head>

<head>
<link rel="preload" href="/Fonts/CamingoCode.woff2" as="font" type="font/woff2" crossorigin>
</head>

現在，讓我們對程式碼進行分解。

rel="preload" 指示瀏覽器預載字型。
href="Fonts/CamingoCode.woff2 指定要預載字型的位置。在本例中，字型檔案 CamingoCode.woff2 位於網路伺服器的 Fonts 目錄中。
as="font" 表示瀏覽器應將要預載的資源視為字型。
type="font/woff2 可幫助瀏覽器理解字型格式為 woff2。
crossorigin 可以確保即使字型檔案來自不同的域，也能被載入。

非同步載入字型

非同步載入字型可以解決渲染阻塞問題。這樣，瀏覽器就能獨立獲取和載入字型檔案，而不會影響頁面其他部分的渲染。

您可以使用 JavaScript 和 CSS 字型載入 API 來做到這一點。通過該 API，您可以控制和監控網頁上網路字型的載入。

// Step 1: Define a FontFace using the font face constructor

const camingoFont = new FontFace("CamingoCode", "url(CamingoCode.woff2)");

// Step 2: Add the FontFace to document.fonts

document.fonts.add(camingoFont);

// Step 3: Load the Font

camingoFont.load();

// Step 4: Wait for the completion of the font loading process

document.camingoFont.ready.then(

() => {

// Use the loaded font to render text

(err) => {

// To handle the error if font load fails

console.error("Font loading failed:", err);

);

// Step 1: Define a FontFace using the font face constructor const camingoFont = new FontFace("CamingoCode", "url(CamingoCode.woff2)"); // Step 2: Add the FontFace to document.fonts document.fonts.add(camingoFont); // Step 3: Load the Font camingoFont.load(); // Step 4: Wait for the completion of the font loading process document.camingoFont.ready.then( () => { // Use the loaded font to render text }, (err) => { // To handle the error if font load fails console.error("Font loading failed:", err); }, );

// Step 1: Define a FontFace using the font face constructor
const camingoFont = new FontFace("CamingoCode", "url(CamingoCode.woff2)");
// Step 2: Add the FontFace to document.fonts
document.fonts.add(camingoFont);
// Step 3: Load the Font
camingoFont.load();
// Step 4: Wait for the completion of the font loading process
document.camingoFont.ready.then(
() => {
// Use the loaded font to render text
},
(err) => {
// To handle the error if font load fails
console.error("Font loading failed:", err);
},
);

下面是上述程式碼的進一步分解。

FontFace 物件指定要載入的字型。它需要兩個引數：字型名稱和 URL 路徑。
將 FontFace 物件新增到 document.fonts 會向瀏覽器發出要載入該字型的訊號。
向 FontFace 物件新增 load() 會明確觸發載入過程。
ready 可確保載入過程在執行前完成。完成載入過程後，將使用載入的字型渲染文字。
如果字型載入失敗， err 函式會捕獲錯誤資訊。

將字型顯示設定為 Swap

font-display CSS 屬性指定了瀏覽器載入和顯示自定義字型檔案的方式。將 font-display 設定為 swap ，可確保在自定義字型可用之前顯示備用字型。

@font-face {

font-family: 'CamingoCode';

src: url('CamingoCode.woff2') format('woff2'); /* url specifies the location of the font file */

font-display: swap; /* Controls the browser behaviour during font download */

}

@font-face { font-family: 'CamingoCode'; src: url('CamingoCode.woff2') format('woff2'); /* url specifies the location of the font file */ font-display: swap; /* Controls the browser behaviour during font download */ }

@font-face {
font-family: 'CamingoCode';
src: url('CamingoCode.woff2') format('woff2'); /* url specifies the location of the font file */
font-display: swap; /* Controls the browser behaviour during font download */
}

在上述 CSS 程式碼中，@font-face 規則定義了一種名為 CamingoCode 的自定義字型。 src 屬性指定了 url 位置和字型格式。此外， font-display: swap 還指示瀏覽器在 CamingoCode 可用之前顯示備用字型。執行此程式碼可最大限度地減少 FOUT 的出現，從而改善使用者體驗。

壓縮自定義字型檔案

現在，你應該知道字型檔案越小效能越好。壓縮字型可以在不影響字型質量的前提下減小字型檔案的大小。以下是一些壓縮字型的方法：

使用 WOFF2：壓縮字型的最佳方法是將字型轉換為網路開放字型格式 2（WOFF2）。WOFF2 是目前最有效的網路字型格式。與其他字型格式相比，它具有更好的壓縮能力
使用 TTF：雖然現代瀏覽器廣泛支援 WOFF2，但在某些舊版本的 Internet Explorer 上，您可能需要使用 TTF（True Type Font）。TTF 是 WOFF2 的次佳替代品。當 WOFF2 與瀏覽器不相容時，應使用 TTF。
利用工具：Font Squirrel 的 Webfont Generator 和 cloudconvert 等工具可以將字型檔案轉換為 WOFF2 和其他首選格式。請按照以下步驟使用 cloudconvert：
到達主頁後，點選選擇檔案（如下圖所示），然後選擇要轉換的字型檔案。

選擇要轉換的字型檔案