自行代管的字型

自行託管字型是指由您的伺服器提供的字型檔案，而不是第三方字型供應程式 (例如 Google Fonts) 的字型檔案。

快速傳遞字型極為重要：字型傳遞速度加快不只表示使用者能更快看到文字，也會大幅影響字型是否會導致版面配置位移。如果無法在需要之前傳送字型，則在切換字型時，版面配置通常會變動。這個版面配置位移的大小可能因備用字型與網路字型的相符程度而異。如要瞭解此現象的實際應用，請查看示範，並比較快速連線和連線速度緩慢時的版面配置位移。

以下範例結合了兩種效能技術，以盡快提供自行代管的字型：使用內嵌字型宣告並使用 WOFF2 字型格式。

  • 內嵌字型宣告：在主要文件中內嵌 @font-face 和 font-family 宣告 (而非將這項資訊納入外部樣式表)，可讓瀏覽器判斷網頁要使用的字型檔案，不必等待其他樣式表檔案下載。一般來說，瀏覽器只有在確定用於網頁字型檔案之前，才會下載字型檔案。在大多數情況下，內嵌字型宣告比較適合使用 preload 載入字型。

  • WOFF2：在新型字型中，WOFF2 是最新的字型、支援最廣泛的瀏覽器，並提供最佳壓縮功能。因為採用 Brotli，WOFF2 的壓縮比 WOFF 高出 30%。

如要進一步提升效能，請考慮使用字型子設定。字型子設定是將字型檔案分割成較小的子集的做法，通常是為了移除未使用的字符。這可以大幅縮減字型的檔案大小。建立字型子集的工具包括 fontkit、subfont 和 glyphhanger。

如要進一步瞭解自行託管字型的最佳做法，請參閱「使用自行代管的字型」。

示例：

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>