字體

令人印象深刻的字體是讓您的網站脫穎而出的好方法。但是，請務必注意使用自訂字體對效能的影響。

不同於預先安裝在使用者電腦上的系統字體，自訂字體需要下載。

FOIT 與 FOUT

當使用者瀏覽網站時，瀏覽器會向伺服器請求字體檔案。然後，瀏覽器會使用這些字體檔案來呈現頁面上的文字。

主要有兩種策略

延遲文字顯示，直到網頁字體下載完成（FOIT - 閃爍的隱形文字）。
使用本地安裝的「後備」字體，直到網頁字體準備就緒（FOUT - 閃爍的未樣式化文字）。

這兩種方法都有缺點。FOIT 會隱藏使用者的文字，而 FOUT 則可能導致視覺體驗不佳。兩者都會導致 CLS 問題。只要需要下載網頁字體，這些問題就會持續存在。

字體顯示

幸運的是，我們可以使用 font-display 屬性來控制瀏覽器處理字體載入的方式。這讓我們可以在兩種策略之間取得平衡。

我們建議您嘗試不同的載入策略，以及字體顯示時間軸的運作方式。

font-display 屬性最常用的兩個值是 swap 和 fallback。

Google Fonts

Google Fonts 是一個熱門的開源字體庫，提供超過 1500 種字體系列。

雖然它們易於使用，但它們需要從不同的網域下載 CSS 檔案和字體，這會導致明顯的延遲和字體載入切換，即使使用 swap 也是如此。

以下是發生的事情

瀏覽器發現 <link href="https://fonts.googleapis.com/css2"> 標籤，這會促使它請求 CSS 檔案。
分析檔案後，它會發現需要來自 https://fonts.gstatic.com 的網頁字體，從而導致另一個請求。

為了減輕這種情況，我們可以自行託管我們的字體。

自行託管

我們可以自行託管字體，而不是使用 Google Fonts 等第三方提供商。這意味著我們下載字體檔案並從我們自己的網域提供它們。

一些好處包括

提升效能
提高隱私性，因為 Google 會追蹤字體的使用情況。
自行託管的字體可以離線載入，這對於 PWA 或網路連線不佳的情況很有用。

Fontsource

使用 Fontsource 進行自行託管就像 npm 安裝一樣簡單。它包含所有 Google 字體，以及其他開源字體，無需自行管理檔案。

他們還提供Qwik City 指南，說明如何將 Fontsource 新增到您的專案中。

手動

有時我們想要自行託管 Google Fonts 或 Fontsource 中未包含的字體。

如果我們有 ttf 或 otf 檔案，我們希望將其轉換為 woff 或 woff2 檔案。為此，我們可以使用 Fontsquirrel 的Webfont Generator Tool。

接下來，我們需要在 CSS 中建立 @font-face 規則。我們要為每個要使用的字體粗細和樣式建立一個新規則。

@font-face {
  font-display: swap;
  font-family: "Peace Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/peace-sans.woff2") format("woff2");
}

以上是字體「Peace Sans」、字體粗細為 400、字體檔案相對 URL 的 @font-face 規則範例。然後，我們可以在 CSS 中使用該字體，如下所示

body {
  font-family: 'Peace Sans', sans-serif;
}

手動自行託管 Google 字體

《Google Webfonts Helper》是一款允許您下載優化 Google 字體的工具。

可惜的是，這不包含可變字體。要解決此問題，您可以使用 Google Fonts API，然後在 Chrome 的「網路」分頁中下載優化的可變字體檔案。

減少字體大小

如果我們沒有使用某些字形，則可以使用 unicode-range 屬性來減少字體大小。《Glyphhanger》是一款允許我們抓取特定字體子集的工具。

常見的情況是僅使用字體的拉丁文字子集。這可以減少我們的字體檔案大小。

後備字體

如果您還記得前面的章節，我們提到過，當自訂字體載入時，我們可能會遇到 CLS 問題。

最近，人們一直在努力進行「字體匹配」，或調整排版屬性以減少自訂字體的 CLS 影響。讓我們來看看我們該怎麼做。

後備字體產生器

這個工具會產生具有特殊屬性的系統後備字體。這裡有一個過度誇張的範例，展示它是如何運作的。

您可以使用 size-adjust、ascent-override 和 descent-override 屬性來調整系統後備字體，使其與自訂字體相符。

Fontaine

Fontaine 會自動調整上述屬性以避免 CLS 問題。他們提供了一個 vite 外掛，您可以在 vite 設定中新增。

系統字體

效能最佳的選擇是系統字體。這是因為使用者在其機器上已經安裝了該字體，瀏覽器可以立即渲染文字。

系統字體通常被稱為「字體堆疊」，它們是彼此非常相似的一組系統字體。如果第一個字體不可用，瀏覽器可以使用堆疊中的下一個字體。

Tailwind CSS 也為常見的系統字體提供了實用類別。《Modern Font Stacks》是一個範例工具，您可以使用它來測試不同的字體堆疊，包括社群成員提供的Tailwind CSS 外掛。

字體使用者體驗

不要將 `ch` 單位用於主體最大寬度

建議最大寬度為 75ch 或 75 個字元，這樣使用者就不必移動頭部即可閱讀文字，而且也更容易閱讀。

但是，如果我們使用自訂字體，則應注意 ch 單位。這是因為 ch 單位基於 0 字元的寬度，而不同字體之間的寬度可能不同。

這可能會導致一些非常奇怪的佈局偏移。我們希望使用 px 或 rem 設定最大寬度。

將 `rem` 與 `font-size` 屬性一起使用。

不同的單位各自有其無障礙考量。我們希望將 rem 與 font-size 屬性一起使用，因為它基於根字體大小。否則，將不會考慮使用者的選定字體大小。

行高建議

瀏覽器的默認行高不利於閱讀。對於正文字體，我們希望行高約為 1.5。對於標題，我們希望行高約為 1.2。

貢獻者

感謝所有讓這份文檔變得更好的貢獻者！

字體