Bagaimana untuk Memuatkan Fon Google dengan Cekap dalam Nuxt dengan Berat Font Berbeza?

Memuatkan Fon Google dalam Nuxt dengan Cekap

Masalah:

Dalam projek NuxtJS, pengguna ingin menggunakan fon Saira Semi Condensed dengan berat fon yang berbeza (600 dan 800) untuk dua komponen berbeza. Walau bagaimanapun, mengimport dua pautan Google Font untuk fon yang sama dengan pemberat yang berbeza membawa kepada lebihan dan potensi isu dengan aplikasi berat fon.

Penyelesaian:

Pendekatan yang disyorkan ialah untuk mengehos sendiri atau memproksi fail Google Font melalui asal halaman dan bukannya menggunakan CDN. Nuxt menyediakan modul @nuxtjs/google-fonts yang membolehkan pemuatan Google Fonts yang cekap dan boleh disesuaikan. Begini cara untuk menggunakannya:

nuxt.config.js:

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

Layout.vue (Bahagian kepala):

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

Nota: Gantikan /fonts dengan laluan yang betul ke fail fon yang dimuat turun.

ComponentA.vue atau ComponentB.vue (Bahagian Gaya):

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

Pendekatan ini memastikan pemberat fon khusus dimuat turun dan digunakan pada komponen masing-masing, menghapuskan keperluan untuk berbilang pautan CDN.

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