Bagaimana untuk Memuatkan Fon Google dengan Cekap dalam Nuxt.js?

Cara Terbaik untuk Memuatkan Fon Google dengan Cekap dalam Nuxt

Apabila bekerja dengan berbilang komponen yang memerlukan berat fon berbeza daripada fon Google yang sama, ia adalah penting untuk mengelakkan amalan berlebihan mengimport berbilang pautan dalam Layout.vue.

Untuk menangani isu ini dan mengoptimumkan pemuatan fon dalam projek NuxtJS, adalah disyorkan untuk menggunakan modul @nuxtjs/google-fonts. Modul ini menawarkan pendekatan yang cekap dan berpusat untuk mengurus import fon Google.

Menggunakan Modul @nuxtjs/google-fonts

1. Pasang modul:

npm install @nuxtjs/google-fonts

2. Tambahkan modul pada fail nuxt.config.js anda:

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        display: 'swap', // Load fonts as soon as possible
        prefetch: false, // Don't prefetch fonts
        preconnect: false, // Don't preconnect to font server
        preload: false, // Don't preload fonts
        download: true, // Download fonts for offline use
        base64: false, // Don't base64 encode fonts
      },
    ],
  ],
}

3. Import fon dalam gaya komponen anda menggunakan @font -peraturan muka:

@font-face {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 600;
  font-style: normal;
  src: local('Saira Semi Condensed'), local('SairaSemiCondensed-Wght600'),
  url("https://fonts.gstatic.com/s/sairasemicondensed/v15/E6qS90ZBdhyxr0K917oteYGc.woff2") format('woff2');
}

Nota Tambahan:

• Jika pemberat fon tertentu tidak dimuat turun, tetapkan penulisan ganti: benar dalam modul konfigurasi atau kemas kini pakej kepada v3.0.0-1.
• Fon Google yang mengehos sendiri biasanya lebih disukai daripada menggunakan CDN untuk pengoptimuman prestasi. Pertimbangkan untuk menggunakan google-webfonts-helper untuk pengehosan sendiri.

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