Bagaimana untuk memuatkan Google Font dengan berat yang berbeza dengan cekap dalam NuxtJS?

Cara memuatkan fon Google dalam Nuxt dengan cekap

Pernyataan Masalah

Anda menghadapi kesukaran memuatkan fon Google dengan berat fon berbeza dalam aplikasi NuxtJS . Anda telah mengimport berbilang pautan untuk fon yang sama dengan berat yang berbeza-beza, tetapi hanya fon asas yang digunakan, menyebabkan kekurangan penyesuaian berat fon yang diingini.

Penyelesaian

Pendekatan yang disyorkan untuk memuatkan Google fon dalam Nuxt adalah untuk mengelak daripada menggunakan CDN dan sebaliknya mengehos sendiri fon atau memproksinya melalui asal halaman anda. Untuk mencapai matlamat ini, pertimbangkan untuk menggunakan modul @nuxtjs/google-fonts, yang menyediakan penyelesaian tanpa kerumitan untuk mengehos sendiri Fon Google.

Konfigurasi Modul 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>

Konfigurasi ini akan memuat turun 600 dan 800 berat fon keluarga fon 'Saira Semi Condensed' dan menjadikannya tersedia untuk digunakan dalam aplikasi.

Penggunaan CSS

Setelah fon dimuat turun, anda boleh merujuknya dalam CSS anda menggunakan peraturan @font-face.

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

Ganti /fonts dengan direktori tempat anda memuat turun fail fon.

Penggunaan dalam Komponen

Dalam komponen Vue anda, anda boleh menetapkan sifat keluarga fon dan berat fon untuk menggunakan fon yang diingini:

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

Dengan mengikut langkah ini, anda boleh memuatkan dan sesuaikan fon Google dengan berat fon berbeza dalam aplikasi NuxtJS anda.

Atas ialah kandungan terperinci Bagaimana untuk memuatkan Google Font dengan berat yang berbeza dengan cekap dalam NuxtJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!