响应式网页字体加载，一种新策略

通过响应式预加载和响应式 font-face 声明优化较慢移动设备的字体加载

Arjen Karel - linkedin

Last update: 2026-02-10

响应式 font display 与响应式预加载字体策略

作为一名 Core Web Vitals 专家，我每天都会看到不同的创意解决方案。大多数方案并没有太大意义，但偶尔我会遇到一种如此简单、如此优雅的策略，它确实对某些网站很有意义。

本文介绍如何为桌面端实现响应式字体预加载，并配合 font display:optional 来消除无样式文本闪烁（FOUT），同时为移动端采用“默认加载”方式并使用 font-display: swap.

提示：此策略非常适合具有较大关键渲染路径的网站。

早期字体加载的问题

在优化 Core Web Vitals 时，有一条始终适用的简单规则：
"在 Largest Contentful Paint 之前执行的所有操作都会拖慢 Largest Contentful Paint"。

这一原则同样适用于网页字体。在页面加载期间优先加载网页字体可以改善 user experience，但如果您的网站难以达到 Core Web Vitals 阈值，特别是针对特定设备类型，您可能需要在 UX 和改善 LCP 之间取得平衡。

让我们看看下面这个荷兰新闻网站的例子。在移动设备上，LCP 元素之前有 3 个字体被排队加载。这使得 3 个字体争夺早期网络资源，并推迟了图片的加载时间。

响应式字体策略来救场！

在这种早期网络竞争激烈的情况下，区分设备类型是有意义的。通常，使用有线连接（和更快网络连接）的桌面设备速度更快，可以同时处理更多的早期网络资源，预加载一些关键字体文件是完全合理的。

另一方面，移动设备可能在通勤途中使用，网络条件不太理想。与桌面设备相比，移动设备通常也拥有更慢的 CPU 和更少的可用内存。这些限制意味着根据设备类型差异化处理字体加载是有意义的。

桌面端： 预加载字体可以在带宽和处理能力更强的设备上提升渲染性能。使用 font-display: optional 来最小化阻塞并消除字体交换问题。这确保字体仅在请求后 100 毫秒内可用时才被使用，而预加载确保能达到这个目标。
移动端： 由于网络竞争，不要预加载字体。使用 font-display: swap 以实现更快的文本渲染。这种方法会立即显示 fallback 字体，同时自定义字体在后台继续加载，为性能较弱的设备提供更好的体验。

使用 <link rel="preload"> 和媒体查询实现

您可以使用 HTML <link> 标签中的 media 属性配合 CSS，根据设备类型应用不同的字体策略，而不是统一加载字体。

HTML 结构

<head>

  <!-- Preload font for desktop only -->
  <link rel="preload" href="/fonts/custom-font.woff2" 
        as="font" crossorigin="anonymous" 
        media="(min-width: 768px)">

  <style>
    /* Global font settings */
    @font-face {
        font-family: 'CustomFont';
        src: url('/fonts/custom-font.woff2') format('woff2');
        font-display: swap;
    }

    /* Desktop font settings */
    @media (min-width: 767px) {
      @font-face {
        font-display: optional;
      }
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  </style>
</head>

此方法的优势

专注桌面端 UX： 桌面端立即使用网页字体渲染，防止出现 FOUT 或 FOIT。
专注移动端性能： font-display: swap 确保用户立即看到文本，即使自定义字体尚未加载。
声明式的简洁性： 避免使用 JavaScript，降低复杂性并提高可维护性。

实际应用案例

正如引言中所述：此策略基于我遇到的一个真实案例。一个面向桌面和移动用户的电子商务网站实施了此策略。结果：

桌面端： 改善了 CLS 和 UX，样式化字体几乎立即显示。
移动端： 更快的 First Contentful Paint 和 Largest Contentful Paint 确保了快速的 user experience，即使在较慢的连接下也是如此。

Secure your Q3 Metrics.

Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.

Start the Engagement >>

Strategic Planning
Code Implementation
Verification & Testing