如何在 Nuxt 專案中高效載入多種粗細的 Google 字型？

在 Nuxt 中高效加載 Google 字體

您在 Nuxt 專案中對 Google 字體應用不同的字體粗細時遇到問題。問題是由於導入不同粗細的相同字體的多個字體連結而引起的，這會引入冗餘。

建議：

最佳解決方案是避免使用 CDN字體載入。透過頁面源自行託管或代理 Google 字體是一種更有效的方法。為了實現這一點，請考慮使用 @nuxtjs/google-fonts 模組。

模組配置：

在您的nuxt.config.js 檔案中，新增以下程式碼：

<code class="js">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        subsets: ['latin'],
        display: 'swap',
      },
    ],
  ]
}</code>

此設定指定應為「Saira Semi Condensed」字體系列載入兩種字體粗細（600 和800）。

CSS 設定：

在Layout.vue 中，匯入字體系列一次：

<code class="css">@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed');</code>

確保您也將對應CSS 規則以在對應組件中應用特定字體粗細：

ComponentA.vue:

<code class="css">footer {
  font-weight: 600;
}</code>

ComponentB.vue:

<code class="css">footer {
  font-weight: 800;
}</code>

注意：

如果特定字體粗細下載失敗，請將@nuxtjs/google-fonts套件更新至v3.0.0-1或在模組配置中設定overwriting: true。

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