Bagaimana untuk Memuatkan Fon Google dengan Berbilang Berat dengan Cekap dalam Projek Nuxt?

Pemuatan Fon Google yang Cekap dalam Nuxt

Anda menghadapi masalah menggunakan pemberat fon yang berbeza pada fon Google anda dalam projek Nuxt. Masalah timbul daripada mengimport berbilang pautan fon untuk fon yang sama dengan berat yang berbeza-beza, yang memperkenalkan lebihan.

Cadangan:

Penyelesaian yang optimum adalah untuk mengelakkan penggunaan CDN untuk memuatkan fon. Mengehos sendiri atau membuat proksi fon Google melalui asal halaman ialah pendekatan yang lebih cekap. Untuk memudahkan ini, pertimbangkan untuk menggunakan modul @nuxtjs/google-fonts.

Konfigurasi Modul:

Dalam fail nuxt.config.js anda, tambahkan kod berikut:

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

Konfigurasi ini menentukan bahawa kedua-dua berat fon (600 dan 800) harus dimuatkan untuk keluarga fon 'Saira Semi Condensed'.

Konfigurasi CSS:

Dalam Layout.vue anda, import keluarga fon sekali:

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

Pastikan anda turut menambah peraturan CSS untuk menggunakan pemberat fon khusus dalam komponen masing-masing:

ComponentA.vue:

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

ComponentB.vue:

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

Nota:

Jika pemberat fon tertentu gagal dimuat turun, kemas kini pakej @nuxtjs/google-fonts kepada v3.0.0-1 atau tetapkan timpa: benar dalam konfigurasi modul.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Fon Google dengan Berbilang Berat dengan Cekap dalam Projek Nuxt?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!