nuxt.js-将预加载的.woff字体加载为@ font-face [英] nuxt.js - preload .woff fonts loaded as @font-face

问题描述

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

Trying to improve my google score and google is telling me to use preload on the two custom fonts i'm using to save a whopping 4.5 seconds? currently the fonts are stored in assets/fonts and then being loaded as @font-face in typography.scss file when is then loaded in the nuxt.config.js file inside css: [ '@/assets/scss/typography.scss', ]

推荐答案

所以我想您在问如何预加载字体?有一种方法可以在nuxt.config.js中调用渲染函数，该函数将预加载字体，脚本和样式，然后将其在客户端中提供，因此您不必将字体加载到scss文件中，只需对其进行设置即可.试试这个:

So I guess you are asking how to preload a font? There is a way to call a render function in nuxt.config.js that will preload fonts, and scripts and styles, and then have them available in the client so you do not have to load the font in your scss file, just set it. Try this:

//nuxt.config.js

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

  ...

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

  },
  ...

}

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

You should also probably store your fonts in the static folder. /static/fonts/yourfonts.woff2

这篇关于nuxt.js-将预加载的.woff字体加载为@ font-face的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！