Wie lade ich Google-Schriftarten mit unterschiedlichen Gewichten effizient in NuxtJS?

So laden Sie Google-Schriftarten effizient in Nuxt

Problemstellung

Sie stoßen auf Schwierigkeiten beim Laden von Google-Schriftarten mit unterschiedlichen Schriftstärken in einer NuxtJS-Anwendung . Sie haben mehrere Links für dieselbe Schriftart mit unterschiedlichen Stärken importiert, es wird jedoch nur die Basisschriftart angewendet, was dazu führt, dass die gewünschte Anpassung der Schriftstärke nicht möglich ist.

Lösung

Der empfohlene Ansatz zum Laden von Google Schriftarten in Nuxt besteht darin, die Verwendung eines CDN zu vermeiden und stattdessen die Schriftarten selbst zu hosten oder sie über Ihren Seitenursprung zu übertragen. Um dies zu erreichen, sollten Sie die Verwendung des @nuxtjs/google-fonts-Moduls in Betracht ziehen, das eine problemlose Lösung für das Selbsthosting von Google Fonts bietet.

Nuxt-Modulkonfiguration (nuxt.config.js)

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

Diese Konfiguration lädt die Schriftstärken 600 und 800 der Schriftfamilie „Saira Semi Condensed“ herunter und stellt sie zur Verwendung in der Anwendung zur Verfügung.

CSS-Verwendung

Sobald die Schriftarten heruntergeladen werden, können Sie sie in Ihrem CSS mithilfe der @font-face-Regel referenzieren.

<code class="css">@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Regular.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Regular.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Regular.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Bold.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Bold.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Bold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}</code>

Ersetzen Sie /fonts durch das Verzeichnis, in das Sie die Schriftartdateien heruntergeladen haben.

Verwendung in Komponenten

In Ihren Vue-Komponenten können Sie die Eigenschaften „font-family“ und „font-weight“ festlegen, um die gewünschte Schriftart anzuwenden:

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 600;">I am Component A</h1>
</template></code>

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 800;">I am Component B</h1>
</template></code>

Indem Sie diese Schritte befolgen, können Sie effizient laden und Passen Sie Google-Schriftarten mit unterschiedlichen Schriftstärken in Ihrer NuxtJS-Anwendung an.

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