Unduh nuxt webfontloader - Unduh Kode Sumber nuxt webfontloader

nuxt webfontloader

Pengunduhan font

1.0.0

Unduh

Nuxt WebFontloader - Pemuatan font web yang efisien tidak pernah semudah ini!

Catatan Rilis

Fitur

Dukungan penuh SVGS sebagai komponen. Impor mereka seperti vue sfcs Anda
Dibangun di atas Google/Typekit's WebFontloader
Meningkatkan kinerja situs dengan memuat font web secara tidak sinkron
Nuxt 2 (dan hanya nuxt 2) dukungan
Diuji sepenuhnya!

Pengaturan

Tambahkan nuxt-webfontloader sebagai ketergantungan menggunakan benang atau NPM ke proyek Anda
Tambahkan nuxt-webfontloader ke bagian modules dari nuxt.config.js

 {
  modules : [
    'nuxt-webfontloader' ,
  ] ,
}

Sertakan opsi WebFontloader Anda di nuxt.config.js , misalnya:

 export default {
  webfontloader : {
    google : {
      families : [ 'Lato:400,700' ] //Loads Lato font with weights 400 and 700
    }
  } ,
}

Hapus stylesheet lama dari template aplikasi Anda atau nuxt.config.js bagian kepala:

 export default {
  head : {
    link : [
      // You don't need that line anymore!
      { rel : 'stylesheet' , href : 'https://fonts.googleapis.com/css?family=Lato:400,700' }
    ]
  }
}

Menambahkan google font dengan opsi tampilan font

Jika Anda suka menggunakan font goggle dengan opsi font-display, ini mungkin.

Tetapi ada perbedaan kecil jika Anda ingin menambahkan hanya satu keluarga font atau lebih dari satu .

Di sini contoh untuk menambahkan satu keluarga font dengan opsi font-display:

 export default {
  webfontloader : {
    google : {
      // Loads Open Sans font with weights 300 and 400 + display font as swap
      families : [ 'Open+Sans:300,400,600&display=swap' ]
    }
  } ,
}

Di sini contoh untuk menambahkan lebih banyak keluarga font dengan opsi font-display:

 export default {
  webfontloader : {
      // add Google Fonts as "custom" | workaround required
      custom : {
          families : [
              'Open Sans:n3,n4' ,
              'Roboto:n3,n7'
          ] ,
          urls : [
              // for each Google Fonts add url + options you want
              // here add font-display option
              'https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap' ,
              'https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
          ]
      }
  } ,
}