Web 字型與瀏覽器字型選擇

字樣或字型家族會將相關字型面歸組在一起。字型面具有字重、樣式和字寬等屬性。字形是針對字元或字元序列選取並繪製出的形狀。

瀏覽器會逐字元進行字型選擇。因此，一個段落可以為拉丁字母使用一個家族，為 CJK 字元使用另一個家族，並為表情符號使用表情符號字型。

建立字型家族堆疊 #

font-family 是由家族名稱和通用家族組成的有序清單：

body {
  font-family:
    "Example Sans",
    "Noto Sans",
    system-ui,
    sans-serif;
}

包含空白的家族名稱應加上引號。由於不同作業系統提供的本機字型不同，應以通用家族作為堆疊的結尾。

通用家族包括 serif、sans-serif、monospace、cursive、fantasy、system-ui、ui-serif、ui-sans-serif、ui-monospace、ui-rounded、emoji、math 和 fangsong。較新的通用名稱在不同環境中的支援情況不一，因此應保留範圍廣泛的最終備援。

針對每個字元，瀏覽器會考慮可用的字型面、要求的樣式、字重和字寬；如果選取的字型面缺少字形，便會進行備援。備援可能使同一行中的度量發生變化，因此應測試正式內容包含的文字系統。

宣告可下載的字型面 #

@font-face 會將家族和字型面範圍與資源建立關聯：

@font-face {
  font-family: "Example Sans";
  src: url("/fonts/example-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

宣告本身不會套用字型。後續的 font-family 宣告才會選取它。

除非檔案包含相應的可變軸，否則應分別宣告斜體和正體字型面：

@font-face {
  font-family: "Example Sans";
  src: url("/fonts/example-sans-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

準確的描述元可以在實際字型面存在時，避免瀏覽器合成粗體或斜體。

只有在合成粗體、斜體或小型大寫字母會違反設計要求，且所有必要字型面都可用時，才應設定 font-synthesis: none。否則，當選取的字型缺少要求的字型面時，合成可以保留強調效果。

了解 Web 字型格式 #

現代網站應優先使用 WOFF2。它使用針對 Web 傳輸設計的壓縮來封裝 OpenType 或 TrueType 字型資料。

格式轉換不會授予重新散布權。在自行託管或製作子集之前，請確認字型授權條款。

有意識地使用可變字型 #

可變字型會在一個檔案中儲存一系列設計。已註冊的軸包括字重（wght）、寬度（wdth）、光學尺寸（opsz）、傾斜度（slnt）和斜體（ital）。

@font-face {
  font-family: "Example Variable";
  src: url("/fonts/example-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: normal;
}

針對已註冊的軸，請使用 font-weight 和 font-stretch 等高階屬性。font-variation-settings 適用於自訂軸或精確的低階控制。

可變字型面會參與與靜態字型面相同的家族比對演算法。要求值位於已宣告軸範圍內時，會選取插值實例。當要求值超出範圍時，比對會使用最接近的支援值，或家族中另一個更符合的字型面；如果選取的字型面缺少某個字元，則會針對該字元繼續透過備援家族清單進行選擇。請宣告準確的範圍，以避免瀏覽器選取無法產生要求實例的字型面。

可變字型檔案不會自動小於所有靜態字型集合。當頁面需要使用足夠大的所表示範圍，以抵銷額外的可變資料時，使用可變字型才有效率。

控制載入和版面位移 #

font-display 定義備援行為：

• block 允許在備援前出現一段短暫的不可見文字時間。
• swap 立即顯示備援，並在字型面到達時進行替換。
• fallback 使用短暫的封鎖期和有限的替換期。
• optional 允許瀏覽器在受限情況下繼續使用備援。

swap 可以維持文字可讀性，但度量不一致可能造成版面位移。請選擇比例相近的備援，或使用度量覆寫：

@font-face {
  font-family: "Example Sans Fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

覆寫值應根據測量所得的字型度量推導，而不是憑猜測設定。

只預先載入初始繪製期間需要的字型面：

<link
  rel="preload"
  href="/fonts/example-sans-latin.woff2"
  as="font"
  type="font/woff2"
  crossorigin>

預先載入 URL、CORS 模式和 @font-face URL 必須相符，否則瀏覽器可能會下載資源兩次。過度預先載入會與關鍵 CSS、指令碼和圖片競爭資源。

依字元涵蓋範圍製作子集 #

unicode-range 可讓瀏覽器僅在文字需要相應碼點時下載字型面：

@font-face {
  font-family: "Example Sans";
  src: url("/fonts/example-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

所有子集合併後必須涵蓋組合標記、標點符號、符號和所有支援的語言。缺少組合標記可能產生無法與基底字元對齊的備援字形。

存取本機字型 #

在支援的瀏覽器中，window.queryLocalFonts() 可在使用者授權後列舉本機安裝的字型：

const fonts = await window.queryLocalFonts();
const matching = fonts.filter((font) => font.family === "Noto Sans");

字型列舉會暴露可識別資訊，因此受到嚴格的權限和可用性限制。不要讓一般頁面繪製依賴它；CSS 字型比對已經會使用字型家族堆疊中指定的已安裝字型。

@font-face 中的 local() 來源也會將已安裝字型的可用性提供給 CSS 比對。基於隱私考量，瀏覽器可能忽略本機來源，或降低其精確度，因此應在任何本機提示之後提供可下載的來源：

@font-face {
  font-family: "Example Sans";
  src:
    local("Example Sans"),
    url("/fonts/example-sans.woff2") format("woff2");
}

不要使用冗長的本機字型探測清單作為指紋識別機制。