如何在Nuxt 3中预加载字体？解决页面重载字体跳动问题

在Nuxt 3中，字体预加载的配置逻辑和Nuxt 2不同，需要在nuxt.config.ts（或nuxt.config.js）的app.head字段中配置预加载链接，具体代码如下：

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        {
          rel: 'preload',
          type: 'font/woff2',
          href: '/fonts/font.woff2',
          as: 'font',
          crossorigin: true
        }
      ]
    }
  }
})

如果使用JavaScript配置文件，代码结构一致，仅需去掉类型相关语法。

另外，仅靠预加载还不足以完全解决字体跳动，需要配合CSS的font-display属性优化字体加载行为。在你的全局样式文件（比如assets/css/main.css）中定义字体时添加该属性：

@font-face {
  font-family: '自定义字体名';
  src: url('/fonts/font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block; /* 等待字体加载完成后再渲染文本，避免跳动 */
}

注意：确保字体文件放置在项目根目录的public/fonts文件夹下，这样配置中的路径才能正确访问到字体资源。

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