自托管的字体

自托管字体是由您自己的服务器提供的字体文件，而不是第三方字体提供程序（如 Google Fonts）的字体文件。

快速传送字体至关重要：加快字体传送速度不仅意味着用户可以更快地看到文本，还极大地影响着字体是否会导致布局偏移。如果某种字体在需要之前无法传送，那么在切换字体时，通常会发生布局偏移。这种布局偏移的大小可能因回退字体与网页字体的匹配程度而异。如需查看这种现象的实际运用情况，请查看演示并比较快速连接和慢速连接时发生的布局偏移。

以下示例结合了以下两种性能技术，以尽快提供自托管字体：使用内嵌字体声明和使用 WOFF2 字体格式。

  • 内嵌字体声明：通过在主文档中内联 @font-face 和 font-family 声明（而不是在外部样式表中包含此信息），浏览器可以确定网页上将使用的字体文件，而无需等待单独的样式表文件下载。这一点很重要，因为通常浏览器只有在确定网页使用了这些字体文件后才会下载它们。在大多数情况下，内嵌字体声明最好使用 preload 加载字体。

  • WOFF2：在现代字体字体中，WOFF2 是最新的字体，具有最广泛的浏览器支持，并且能够提供最佳的压缩效果。由于 WOFF2 使用了 Brotli，因此其压缩效果比 WOFF 高 30%。

为了进一步提高性能，请考虑使用字体子集。字体子集内嵌是将字体文件拆分为较小子集的做法，通常目标是移除未使用的字形。这可以显著减小字体的文件大小。用于创建字体子集的工具包括 fontkit、子字体和字形架。

如需详细了解自托管字体的最佳实践，请参阅使用自托管字体。

例如：

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>