nuxt.js - 預加載 .woff 字體加載為 @font-face

Question

試圖提高我的谷歌分數，谷歌告訴我在我使用的兩種自定義字體上使用預加載以節省高達 4.5 秒的時間？ 當前字體存儲在assets/fonts中，然后在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