nuxt.js - 预加载 .woff 字体加载为 @font-face

Question

试图提高我的谷歌分数，谷歌告诉我在我使用的两种自定义字体上使用预加载以节省高达 4.5 秒的时间？当前字体存储在assets/fonts中，然后在typography.scss文件中作为@font-face加载，然后在css中的nuxt.config.js文件中加载：['@/assets/scss/typography.scss' , ]

Answer 1

所以我猜你是在问如何预加载字体？有一种方法可以在 nuxt.config.js 中调用渲染函数，它会预加载字体、脚本和样式，然后让它们在客户端中可用，这样您就不必在 scss 文件中加载字体，只需设置它. 尝试这个：

//nuxt.config.js

module.exports = {
  mode: ' your mode ',

  ...

  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type)
      }
    }

  },
  ...

}

您可能还应该将字体存储在静态文件夹中。 /static/fonts/yourfonts.woff2