Wie lade ich Google-Schriftarten mit unterschiedlichen Schriftstärken effizient in Nuxt?

Effizientes Laden von Google Fonts in Nuxt

Problem:

In einem NuxtJS-Projekt wird die Der Benutzer möchte die Schriftart Saira Semi Condensed mit unterschiedlichen Schriftstärken (600 und 800) für zwei verschiedene Komponenten verwenden. Das Importieren von zwei Google Font-Links für dieselbe Schriftart mit unterschiedlichen Stärken führt jedoch zu Redundanz und potenziellen Problemen bei der Anwendung der Schriftstärke.

Lösung:

Der empfohlene Ansatz ist um Google Font-Dateien über den Seitenursprung selbst zu hosten oder zu übertragen, anstatt ein CDN zu verwenden. Nuxt stellt das Modul @nuxtjs/google-fonts bereit, das ein effizientes und anpassbares Laden von Google Fonts ermöglicht. So verwenden Sie es:

nuxt.config.js:

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        // Other options here...
      },
    ],
  ],
}

Layout.vue (Kopfabschnitt):

<link rel="preload" href="/fonts/SairaSemiCondensed-wght@600.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/fonts/SairaSemiCondensed-wght@800.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Hinweis: Ersetzen Sie /fonts durch den korrekten Pfad zu den heruntergeladenen Schriftartdateien.

ComponentA.vue oder ComponentB.vue (Stilabschnitt):

footer {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 600; /* or 800 for ComponentB */
}

Dieser Ansatz stellt sicher, dass die spezifischen Schriftstärken heruntergeladen und auf die jeweiligen Komponenten angewendet werden, wodurch die Notwendigkeit mehrerer CDN-Links entfällt.

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