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>

この構成では、両方のフォント ウェイト (600 と 800) を「Sira Semi Condensed」フォント ファミリにロードする必要があることを指定します。

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 中国語 Web サイトの他の関連記事を参照してください。