nuxt webfontloader Download - nuxt webfontloader Code Source Download

nuxt webfontloader

Téléchargement de polices

1.0.0

Télécharger

Nuxt WebFontloader - Le chargement efficace des polices Web n'a jamais été aussi simple!

Notes de libération

Caractéristiques

Support complet des SVG en tant que composants. Les importez comme votre Vue SFCS
Construit au-dessus de Webfontloader de Google / Typekit
Améliore les performances du site en chargeant des fonds Web de manière asynchrone
Nuxt 2 (et uniquement Nuxt 2) Support
Entièrement testé!

Installation

Ajouter nuxt-webfontloader comme dépendance à l'aide de fil ou de NPM à votre projet
Ajoutez nuxt-webfontloader dans la section modules de nuxt.config.js

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

Incluez vos options WebFontloader dans nuxt.config.js , par exemple:

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

Supprimez les anciens styles de styles de votre modèle d'application ou nuxt.config.js Pièce de tête:

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

Ajout de polices Google avec une option d'affichage de police

Si vous aimez utiliser des polices Goggle avec une option de désactivation de police, cela est possible.

Mais il y a une petite différence si vous ne voulez ajouter qu'une seule famille de polices ou plus d'un .

Ici, un exemple pour ajouter une famille de polices avec une option de désactivation de police:

 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' ]
    }
  } ,
}

Ici, un exemple pour ajouter plus de familles de polices avec une option de désactivation de police:

 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'
          ]
      }
  } ,
}