Question

试图提高我的Google得分，而Google告诉我在我用来节省4.5秒的两种自定义字体上使用预加载功能？当前，字体存储在资产/字体中，然后在@css内的nuxt.config.js文件中加载时，在typography.scss文件中作为@ font-face加载：['@ / assets / scss / typography.scss' ，]

google审核图片-https://imgur.com/a/LaMLnJ1

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

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

1 个答案: