Wie lade ich Google-Schriftarten mit mehreren Stärken effizient in ein Nuxt-Projekt?

Effizientes Laden von Google-Schriftarten in Nuxt

Sie stoßen auf Probleme beim Anwenden unterschiedlicher Schriftstärken auf Ihre Google-Schriftarten in einem Nuxt-Projekt. Das Problem entsteht durch den Import mehrerer Schriftart-Links für dieselbe Schriftart mit unterschiedlichen Gewichten, was zu Redundanz führt.

Empfehlung:

Die optimale Lösung besteht darin, die Verwendung eines CDN für zu vermeiden Laden von Schriftarten. Ein effizienterer Ansatz ist das Selbsthosten oder Proxying von Google-Schriftarten über den Seitenursprung. Um dies zu erleichtern, sollten Sie die Verwendung des @nuxtjs/google-fonts-Moduls in Betracht ziehen.

Modulkonfiguration:

Fügen Sie in Ihrer nuxt.config.js-Datei den folgenden Code hinzu:

<code class="js">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        subsets: ['latin'],
        display: 'swap',
      },
    ],
  ]
}</code>

Diese Konfiguration gibt an, dass beide Schriftstärken (600 und 800) für die Schriftfamilie „Saira Semi Condensed“ geladen werden sollen.

CSS-Konfiguration:

In Ihrem Layout.vue importieren Sie die Schriftfamilie einmal:

<code class="css">@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed');</code>

Stellen Sie sicher, dass Sie auch CSS-Regeln hinzufügen, um die spezifischen Schriftstärken in den jeweiligen Komponenten anzuwenden:

ComponentA.vue:

<code class="css">footer {
  font-weight: 600;
}</code>

ComponentB.vue:

<code class="css">footer {
  font-weight: 800;
}</code>

Hinweis:

Wenn der Download bestimmter Schriftstärken fehlschlägt, aktualisieren Sie das Paket @nuxtjs/google-fonts auf v3.0.0-1 oder legen Sie in der Modulkonfiguration „overwriting: true“ fest.

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