如何在Nuxt中高效載入不同字體粗細的Google字體？

在Nuxt 中高效加載Google 字體

問題：

問題：

問題：

在NuxJS 項目中使用者想要對兩個不同的組件使用具有不同字體粗細（600 和800）的Saira Semi Condensed 字體。但是，匯入具有不同粗細的相同字體的兩個 Google Font 連結會導致冗餘，並導致字體粗細應用程式出現潛在問題。

解決方案：

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        // Other options here...
      },
    ],
  ],
}

建議的方法是透過頁面源自行託管或代理 Google Font 文件，而不是使用 CDN。 Nuxt 提供了 @nuxtjs/google-fonts 模組，可以高效且可自訂地載入 Google 字型。使用方法如下：

<link rel="preload" href="/fonts/SairaSemiCondensed-wght@600.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/fonts/SairaSemiCondensed-wght@800.woff2" as="font" type="font/woff2" crossorigin="anonymous">

nuxt.config.js:

Layout.vue（頭部部分）：

footer {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 600; /* or 800 for ComponentB */
}

注意：

將/fonts 替換為下載字型檔案的正確路徑。 ComponentA.vue 或ComponentB.vue（樣式部分）：此方法可確保下載特定的字體粗細並將其套用到對應的元件，從而無需多個CDN 連結。

以上是如何在Nuxt中高效載入不同字體粗細的Google字體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！