Wie lade ich Google-Schriftarten effizient in Nuxt.js?

Beste Möglichkeit, Google-Schriftarten effizient in Nuxt zu laden

Wenn Sie mit mehreren Komponenten arbeiten, die unterschiedliche Schriftstärken derselben Google-Schriftart erfordern, ist dies der Fall wichtig, um die überflüssige Praxis des Importierens mehrerer Links in Layout.vue zu vermeiden.

Um dieses Problem zu beheben und das Laden von Schriftarten zu optimieren Für NuxtJS-Projekte wird empfohlen, das Modul @nuxtjs/google-fonts zu verwenden. Dieses Modul bietet einen effizienten und zentralisierten Ansatz zur Verwaltung von Google-Schriftartimporten.

Verwenden des @nuxtjs/google-fonts-Moduls

1. Installieren Sie das Modul:

npm install @nuxtjs/google-fonts

2. Fügen Sie das Modul zu Ihrer nuxt.config.js hinzu Datei:

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. Importieren Sie die Schriftarten in Ihrem Komponentenstil mithilfe der @font-face-Regel:

@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');
}

Zusätzliche Hinweise:

• Wenn bestimmte Schriftstärken nicht heruntergeladen werden, legen Sie „overwriting: true“ in der Modulkonfiguration fest oder Aktualisieren Sie das Paket auf v3.0.0-1.
• Das Selbsthosten von Google Fonts ist im Allgemeinen der Verwendung eines CDN zur Leistungsoptimierung vorzuziehen. Erwägen Sie die Verwendung von Google-Webfonts-Helper für das Selbsthosting.

Das obige ist der detaillierte Inhalt vonWie lade ich Google-Schriftarten effizient in Nuxt.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!