nuxt webfontloader Download - nuxt webfontloader Quellcode herunterladen

nuxt webfontloader

Schriftarten herunterladen

1.0.0

Herunterladen

Nuxt WebFontloader - Effizientes Web -Schriftart war noch nie einfacher!

Versionshinweise

Merkmale

Vollständige Unterstützung von SVGs als Komponenten. Importieren Sie sie wie Ihre Vue SFCs
Aufbauten über Google/Typkits WebFontloader
Verbessert die Leistung der Site, indem Sie asynchron geladene Web-Fonts laden
Nuxt 2 (und nur Nuxt 2) Unterstützung
Voll getestet!

Aufstellen

Fügen Sie nuxt-webfontloader als Abhängigkeit mit Garn oder NPM zu Ihrem Projekt hinzu
Fügen Sie nuxt-webfontloader zu modules -Abschnitt von nuxt.config.js hinzu

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

Fügen Sie Ihre WebFontloader -Optionen in die nuxt.config.js ein, zum Beispiel:

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

Entfernen Sie alte Stylesheets aus Ihrer App -Vorlage oder nuxt.config.js Kopfteil:

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

Hinzufügen von Google -Schriftarten mit der Option Schriftart Display

Wenn Sie Goggle-Schriftarten mit Schrift-Display-Option verwenden möchten, ist dies möglich.

Es gibt jedoch einen kleinen Unterschied, wenn Sie nur eine Schriftfamilie oder mehr als eine Font -Familie hinzufügen möchten .

Hier ein Beispiel zum Hinzufügen einer Schriftfamilie mit Schrift-Display-Option:

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

Hier ein Beispiel für das Hinzufügen weiterer Schriftfamilien mit Schrift-Display-Option:

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