異なるフォントウェイトを使用してNuxtにGoogleフォントを効率的にロードするにはどうすればよいですか?

Nuxt での Google フォントの効率的なロード

問題:

NuxtJS プロジェクトでは、ユーザーは、2 つの異なるコンポーネントに対して異なるフォントウェイト (600 と 800) を持つ Saira Semi Condensed フォントを使用したいと考えています。ただし、異なるウェイトを持つ同じフォントの 2 つの Google フォント リンクをインポートすると、冗長性が生じ、フォント ウェイト アプリケーションで潜在的な問題が発生する可能性があります。

解決策:

推奨されるアプローチは次のとおりです。 CDN を使用するのではなく、ページのオリジンを通じて Google Font ファイルを自己ホストまたはプロキシします。 Nuxt は、Google Fonts の効率的かつカスタマイズ可能な読み込みを可能にする @nuxtjs/google-fonts モジュールを提供します。使用方法は次のとおりです:

nuxt.config.js:

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

Layout.vue (Head セクション):

<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">

注: /fonts をダウンロードしたフォント ファイルへの正しいパスに置き換えます。

ComponentA.vue または ComponentB.vue (スタイル セクション):

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

このアプローチにより、特定のフォント ウェイトがダウンロードされてそれぞれのコンポーネントに適用されることが保証され、複数の CDN リンクが不要になります。

以上が異なるフォントウェイトを使用してNuxtにGoogleフォントを効率的にロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。