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

Posted 2023-02-22

【中文标题】nuxt.js - 预加载 .woff 字体加载为@font-face

【英文标题】：nuxt.js - preload .woff fonts loaded as @font-face

【发布时间】：2019-06-02 16:01:33

【问题描述】：

试图提高我的谷歌分数，谷歌告诉我在我使用的两种自定义字体上使用预加载来节省高达 4.5 秒的时间？当前字体存储在 assets/fonts 中，然后在typography.scss文件中作为@font-face 加载，然后在css中的nuxt.config.js文件中加载：['@/assets/scss/typography.scss' , ]

【参考方案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

【讨论】：

不用担心，很高兴为您提供帮助。

我不知道为什么，但对我来说这没有任何作用。我关注了这个问题：github.com/nuxt/nuxt.js/issues/1508，但对我来说唯一有影响的就是把它放在我的 head.link 中 rel: 'preload', as: 'font', type: 'font/woff2', href: '/fonts/myfont.woff2', crossorigin: true

module.exports 是在 export default 之外还是在里面？

对我不起作用，看看这个github.com/manniL/lichter.io/blob/…

使用此选项自定义 vue s-s-r 捆绑渲染器。如果 s-s-r: false，则跳过此选项。 nuxtjs.org/docs/2.x/configuration-glossary/configuration-render