Nuxt.js - 预加载@font-face加载的.woff字体

Question

我想提高谷歌评分，但谷歌告诉我使用预加载来节省 4.5 秒的时间。目前，这两种自定义字体存储在 assets/fonts 中，并在 typography.scss 文件中作为 @font-face 加载，然后在 nuxt.config.js 文件中通过 css: [ '@/assets/scss/typography.scss', ] 进行加载。

- user10649239

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

- Andrew1325

---

没问题，很高兴能帮忙。 - Andrew1325

我不知道为什么，但对我来说这没有任何作用。我遵循了这个问题：https://github.com/nuxt/nuxt.js/issues/1508 但对我唯一有影响的是将其放在我的head链接中，使用{ rel: 'preload', as: 'font', type: 'font/woff2', href: '/fonts/myfont.woff2', crossorigin: true }。 - tettoffensive

module.exports是在export default{}之外还是之内？ - SRR

对我没有用，看这个 https://github.com/manniL/lichter.io/blob/473bcc19203dda9c34933e804d3cb661edbe1678/nuxt.config.js#L116 - LOG_TAG

使用此选项自定义Vue SSR Bundle渲染器。如果ssr: false，则会跳过此选项。https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-render/ - menepet