如何在 Nuxt 專案中高效載入 Google 字型？

如何在Nuxt 中高效加載Google 字體

使用NuxtJS 時，考慮加載Google 字體的最佳實踐至關重要，以確保最佳性能。正如 Vitaly Friedman 的《2021 年性能檢查表》所強調的那樣，依賴 CDN 並不是推薦的方法。相反，採用自架或透過頁面來源進行代理程式是首選方法。

強烈建議的一個選項是利用 @ nuxtjs/google-fonts 模組，它提供了將 Google 字型整合到 Nuxt 專案中的便捷解決方案。以下是您在nuxt.config.js 檔案中配置它的方法：

<code class="js">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          Mali: {
            wght: [400, 600, 700],
          },
        },
        subsets: ['latin'],
        display: 'swap',
        prefetch: false,
        preconnect: false,
        preload: false,
        download: true,
        base64: false,
      },
    ],
  ],
}</code>

此配置將自動處理具有各種粗細的Mali 字體系列的加載，確保將適當的粗細應用於每個元素

請注意，如果您遇到未下載特定權重的問題，您可以在模組配置中將覆蓋屬性設為true 或將套件版本更新為v3.0.0-1。

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