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

Question

试图提高我的谷歌分数，谷歌告诉我对我使用的两种自定义字体使用预加载来节省高达 4.5 秒的时间？当前字体存储在 Assets /字体中，然后在 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