如何在Nuxt3中预加载字体，避免页面字体闪烁与CLS问题？

以下是几个可行的解决方案，按优先级尝试：

1. 修正@font-face配置（核心前提） #

首先确保你的assets/css/fonts.css中的字体定义正确配置了font-display属性，这是避免字体闪烁的基础：

@font-face {
  font-family: 'YourCustomFont';
  src: url('../fonts/font.woff2') format('woff2'),
       url('../fonts/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  /* 用block阻止 fallback 字体渲染，直到自定义字体加载完成 */
  /* 或用optional，若字体加载超时则直接用系统字体，避免长期阻塞 */
  font-display: block;
}

如果font-display设置为swap，会先显示 fallback 字体，等自定义字体加载后切换，这正是导致CLS的核心原因，必须调整为block或optional。

2. 正确配置Nuxt3的预加载规则 #

Nuxt3废弃了Nuxt2的render.bundleRenderer配置，需要通过nuxt.config.ts的nitro和app.head来配置资源预加载：

export default defineNuxtConfig({
  nitro: {
    // 给字体文件设置强缓存，避免重复请求
    routeRules: {
      '/fonts/**/*.woff2': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      }
    }
  },
  app: {
    head: {
      link: [
        {
          rel: 'preload',
          as: 'font',
          type: 'font/woff2',
          href: '/fonts/font.woff2',
          crossorigin: '' // 同域资源也必须设置crossorigin，否则浏览器会忽略预加载请求
        }
      ]
    }
  },
  css: [
    '~/assets/css/fonts.css',
    'vuetify/lib/styles/main.sass',
    '~/assets/global.css'
  ]
})

3. 内联关键字体CSS（进阶优化） #

如果字体文件较小（小于15KB），可以将@font-face规则内联到HTML头部，避免额外的CSS请求阻塞字体加载：
在app.vue中使用useHead内联样式：

<script setup>
useHead({
  style: [
    {
      children: `
        @font-face {
          font-family: 'YourCustomFont';
          src: url('/fonts/font.woff2') format('woff2');
          font-weight: normal;
          font-style: normal;
          font-display: block;
        }
      `
    }
  ],
  link: [
    {
      rel: 'preload',
      as: 'font',
      type: 'font/woff2',
      href: '/fonts/font.woff2',
      crossorigin: ''
    }
  ]
})
</script>

这样浏览器解析HTML时就能立即获取字体定义，配合预加载进一步减少延迟。

4. 验证预加载是否生效 #

打开浏览器开发者工具：

• 切换到Network面板，筛选Font类型，查看字体文件是否标记为Preload
• 切换到Performance面板，录制页面加载过程，检查是否存在字体切换导致的布局偏移
• 用Lighthouse audit检查CLS指标，确认问题是否解决

内容的提问来源于stack exchange，提问作者PeterS