Heim  >  Artikel  >  Web-Frontend  >  Wie lade ich Google-Schriftarten mit mehreren Stärken effizient in ein Nuxt-Projekt?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 12:31:30680Durchsuche

How to Efficiently Load Google Fonts with Multiple Weights in a Nuxt Project?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn