So verwenden Sie @next/font zum Optimieren von Schriftarten in Next.js

Verlangsamen Schriftarten die Leistung Ihrer Website? Optimieren Sie mit diesem Paket die Ladezeit der Schriftarten Ihrer Anwendung.

Möglicherweise möchten Sie benutzerdefinierte Schriftarten verwenden, um Ihre Next.js-Anwendung optisch ansprechender zu gestalten. Die Verwendung benutzerdefinierter Schriftarten kann das Erscheinungsbild Ihrer Website erheblich verbessern, kann jedoch auch die Leistung Ihrer Website beeinträchtigen, wenn sie nicht ordnungsgemäß optimiert wird. Der@next/fontPaket ist eine Lösung für dieses Problem.

Das @next/font-Paket bietet eine einfache und effiziente Möglichkeit, das Laden von Schriftarten in Next.js zu optimieren und so die Ladezeit der Seite und die Gesamtleistung zu verbessern. Dieser Artikel enthält Informationen zur Verwendung von @next/font in Ihrem Next.js-Projekt.

Sie können das installieren@next/fontPaket, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

Wenn Sie Garn verwenden, können Sie das Paket installieren, indem Sie diesen Befehl ausführen:

Der@next/font Paket optimiert die Verwendung von Google-Schriftarten. Der@next/fonthostet die Google-Schriftarten automatisch selbst auf dem Next.js-Server, sodass keine Anfrage an Google gesendet wird, um die Schriftarten abzurufen.

Um eine Google-Schriftart in Ihrer Anwendung zu verwenden, importieren Sie die Schriftart als Funktion aus@next/font/googlein die_app.jsDatei in derSeitenVerzeichnis:

Im obigen Codeblock haben Sie eine variable Schriftart mit erstelltRoboter Schriftartfunktion. DerTeilmenge Die Eigenschaft unterteilt die Schriftart ausschließlich auf die lateinischen Zeichen. Wenn Sie eine andere Sprache verwenden, können Sie die Schriftart auf diese Sprache unterteilen.

Sie können beim Definieren der Schriftart auch die Schriftstärke zusammen mit dem Schriftstil angeben:

Mithilfe von Arrays geben Sie mehrere Schriftstärken und Schriftstile an.

Zum Beispiel:

Als nächstes verpacken Sie Ihre Komponenten in einemhauptsächlichTag und übergeben Sie die Schriftart als Klasse an diehauptsächlichEtikett:

Wenn Sie Ihre Anwendung mit dem obigen Codeblock rendern, wird die Schriftart auf Ihre gesamte Anwendung angewendet. Alternativ können Sie die Schriftart auch auf eine einzelne Seite anwenden. Dazu fügen Sie die Schriftart einer bestimmten Seite hinzu.

Etwa so:

Der@next/font Paket optimiert auch die Verwendung lokaler Schriftarten. Die Technik zur Optimierung lokaler Schriftarten durch@next/fontDas Paket ist der Optimierung von Google-Schriftarten sehr ähnlich, mit geringfügigen Unterschieden.

Um lokale Schriftarten zu optimieren, verwenden Sie dielocalFontFunktion, die von der bereitgestellt wird@next/font Paket. Sie importieren dielocalFontFunktion von@next/font/localund definieren Sie dann Ihre variable Schriftart, bevor Sie die Schriftart in Ihrer Next.js-Anwendung verwenden.

Etwa so:

Sie definieren die variable SchriftartmyFontVerwendung derlocalFont Funktion. DerlocalFont Die Funktion verwendet ein Objekt als Argument. Das Objekt hat eine einzelne Eigenschaft,src, der auf den Dateipfad der Schriftartdatei im gesetzt istWOFF2Format"./my-font.woff2".

Sie können mehrere Schriftartdateien für eine einzelne Schriftartfamilie verwenden. Dazu legen Sie die festsrc-Eigenschaft auf ein Array übertragen, das Objekte der verschiedenen Schriftarten und deren Eigenschaften enthält.

Zum Beispiel:

Um das zu nutzen@next/font Um ein Paket mit Tailwind CSS zu erstellen, müssen Sie CSS-Variablen verwenden. Dazu definieren Sie Ihre Schriftart mit Google oder lokalen Schriftarten und laden dann Ihre Schriftart mit der Variablenoption, um den CSS-Variablennamen anzugeben.

Zum Beispiel:

Im obigen Codeblock haben Sie die Schriftart erstellt.inter,und setzen Sie die Variable auf--font-inter . DerKlassennamedes Hauptelements wird dann auf die Schriftartvariable und gesetztverzichten . Derinter.variableDie Klasse wird das anwendeninterSchriftart auf die Seite und dieverzichtenDie Klasse wendet die standardmäßige serifenlose Schriftart an.

Als Nächstes fügen Sie die CSS-Variable zur Tailwind-Konfigurationsdatei hinzutailwind.config.cjs:

Sie können die Schriftart jetzt mithilfe von in Ihrer Anwendung anwendenverzichtenKlasse.

Das @next/font-Paket ist eine einfache und effektive Möglichkeit, das Laden von Schriftarten in Next.js zu optimieren. Dieses Paket stellt sicher, dass Ihre benutzerdefinierten Schriftarten effizient geladen werden und verbessert so die Leistung und Benutzererfahrung Ihrer Website. Dieser Artikel enthält Informationen zum Einrichten des @next/font-Pakets und zur Verwendung in Ihrer Next.js-Anwendung. Sie können die Leistung Ihrer Website weiter verbessern, indem Sie Bilder optimieren.

Noble Okafor ist ein erfahrener Softwareentwickler mit über dreijähriger Erfahrung im Programmierbereich. Seine Leidenschaft gilt der Entwicklung optimierter JavaScript-, nativer und plattformübergreifender Mobil- und Web-Softwarelösungen. Er ist bestrebt, sein Wissen und seine Lektionen durch seine Fachartikel zu dokumentieren und verfügt über mehr als ein Jahr Erfahrung im Schreiben. Der Hauptschwerpunkt und das Ziel dieser Artikel besteht darin, die Komplexität rund um Software-Engineering-Themen zu vereinfachen.