如何在 Nuxt.js 中高效載入 Google 字型？

在Nuxt 中高效加載Google 字體的最佳方式

當使用需要來自同一Google 字體的不同字體粗雜的多個組件時，它是避免在Layout.vue 中導入多個連結的冗餘做法很重要。

為了解決這個問題並優化 NuxtJS 專案中的字體加載，建議使用 @nuxtjs/google-fonts 模組。該模組提供了一種高效且集中的方法來管理 Google 字體導入。

使用@nuxtjs/google-fonts 模組

1. 安裝模組：

npm install @nuxtjs/google-fonts

安裝模組：

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        display: 'swap', // Load fonts as soon as possible
        prefetch: false, // Don't prefetch fonts
        preconnect: false, // Don't preconnect to font server
        preload: false, // Don't preload fonts
        download: true, // Download fonts for offline use
        base64: false, // Don't base64 encode fonts
      },
    ],
  ],
}

安裝模組：

@font-face { font-family: 'Saira Semi Condensed', sans-serif; font-weight: 600; font-style: normal; src: local('Saira Semi Condensed'), local('SairaSemiCondensed-Wght600'), url("https://fonts.gstatic.com/s/sairasemicondensed/v15/E6qS90ZBdhyxr0K917oteYGc.woff2") format('woff2'); }

使用@font 匯入元件樣式中的字型-face 規則：

• 附加說明：

如果未下載特定字體粗細，請在模組中設定overwriting: true配置或將軟體包更新至v3.0.0-1。 自架 Google Fonts 通常比使用 CDN 更適合效能最佳化。考慮使用 google-webfonts-helper 進行自架服務。

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