NuxtJS で異なるウェイトを持つ Google Fonts を効率的にロードするにはどうすればよいですか?

Nuxt に Google フォントを効率的にロードする方法

問題の説明

NuxtJS アプリケーションでフォントの太さの異なる Google フォントをロードする際に問題が発生しました。異なるウェイトを持つ同じフォントの複数のリンクをインポートしましたが、ベース フォントのみが適用されているため、必要なフォント ウェイトのカスタマイズができません。

解決策

Google を読み込むための推奨アプローチNuxt のフォントは、CDN の使用を回避し、代わりにフォントを自己ホストするか、ページのオリジンを通じてフォントをプロキシします。これを実現するには、セルフホスティング Google Fonts のための手間のかからないソリューションを提供する @nuxtjs/google-fonts モジュールの利用を検討してください。

Nuxt モジュール構成 (nuxt.config.js)

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

この設定により、「Sira Semi Condensed」フォント ファミリの 600 および 800 のフォント ウェイトがダウンロードされ、アプリケーションで使用できるようになります。

CSS の使用

フォントが保存されたら、ダウンロードされたら、@font-face ルールを使用して CSS でそれらを参照できます。

<code class="css">@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Regular.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Regular.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Regular.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Bold.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Bold.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Bold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}</code>

/fonts をフォント ファイルをダウンロードしたディレクトリに置き換えます。

コンポーネントでの使用

Vue コンポーネントでは、font-family プロパティと font-weight プロパティを設定して、目的のフォントを適用できます。

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 600;">I am Component A</h1>
</template></code>

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 800;">I am Component B</h1>
</template></code>

次の手順に従うことで、効率的にロードし、 NuxtJS アプリケーションでさまざまなフォントの太さを使用して Google フォントをカスタマイズします。

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