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