Richtige Methode zum Laden von Schriftarten in Vue.js

Das Hinzufügen von Schriftarten sollte sich nicht negativ auf die Leistung auswirken. In diesem Artikel untersuchen wir bewährte Methoden zum Laden von Schriftarten in Ihren Vue-Anwendungen.

Schriftarten mit font-face richtig deklarieren

Ein wichtiger Aspekt beim Laden von Schriftarten besteht darin, sicherzustellen, dass Schriftarten korrekt deklariert werden. Dies geschieht durch die Deklaration der Schriftart Ihrer Wahl mithilfe der Eigenschaft „Font-Face“. In Ihrem Vue-Projekt kann diese Deklaration in Ihrer Stamm-CSS-Datei erfolgen. Bevor wir auf diese Frage eingehen, werfen wir einen Blick auf die Struktur einer Vue-Anwendung.

/Wurzel
 öffentlich/
 Schriftarten/
 Roboter/
 Roboto-Regular.woff2
 Roboto-Regular.woff
 Hauptseite
 Quelle/
 Vermögenswerte/
 main.css
 Komponenten/
 Router/
 speichern/
 Ansichten/
 Haupt-JS

Dies können wir in main.css tun, indem wir die Schriftart wie folgt deklarieren:

// src/assets/main.css

@Schriftart {
 Schriftfamilie: „Roboto“;
 Schriftstärke: 400;
 Schriftstil: normal;
 Schriftanzeige: automatisch;
 Unicode-Bereich: U+000-5FF;
 src: lokal("Roboto"),
 url("/fonts/Roboto/Roboto-Regular.woff2") format("woff2"),
 url("/fonts/Roboto/Roboto-Regular.woff") Format("woff");
}

Als erstes fällt font-display:auto auf. Wenn Sie „auto“ als Wert verwenden, kann der Browser die am besten geeignete Strategie zum Anzeigen der Schriftart verwenden. Dies hängt von Faktoren wie Netzwerkgeschwindigkeit, Gerätetyp, Leerlaufzeit usw. ab.

Wenn Sie mehr Kontrolle darüber haben möchten, wie Schriftarten geladen werden, sollten Sie font-display: block verwenden. Dadurch wird der Browser angewiesen, den Text kurz auszublenden, bis die Schriftarten vollständig heruntergeladen wurden. Andere mögliche Werte sind Swap, Fallback und Optional. Mehr dazu können Sie hier lesen.

Beachten Sie den Unicode-Bereich: U+000-5FF, der den Browser anweist, nur den erforderlichen Glyphenbereich (U+000 - U+5FF) zu laden. Sie möchten auch die Schriftformate woff und woff2 verwenden. Dabei handelt es sich um optimierte Formate, die in den meisten modernen Browsern funktionieren.

Zu beachten ist außerdem die Quellreihenfolge. Zuerst prüfen wir, ob eine lokale Kopie der Schriftart verfügbar ist ( local("Roboto") ) und verwenden diese. Auf vielen Android-Geräten ist Roboto vorinstalliert. In diesem Fall verwenden wir die vorinstallierte Kopie. Wenn keine lokale Kopie vorhanden ist, fahren Sie mit dem Herunterladen des Woff2-Formats fort, sofern Ihr Browser dies unterstützt. Andernfalls wird zur nächsten Schriftart in der unterstützten Deklaration gesprungen.

Schriftarten vorladen

Sobald Ihre benutzerdefinierte Schriftart deklariert ist, können Sie <link rel="preload"> verwenden, um den Browser anzuweisen, die Schriftart im Voraus vorzuladen. Fügen Sie in public/index.html Folgendes hinzu:

<Link
 rel="Vorladen"
 as="Schriftart"
 href="./fonts/Roboto/Roboto-Regular.woff2"
 Typ="Schriftart/woff2"
 crossorigin="anonym"
/>

rel="preload" weist den Browser an, so schnell wie möglich mit dem Abrufen der Ressource zu beginnen, und as="font" teilt dem Browser mit, dass es sich um eine Schriftart handelt, sodass er der Anforderung Priorität einräumt. Beachten Sie auch crossorigin="anonymous", da ohne dieses Attribut die vorinstallierten Schriftarten vom Browser verworfen werden. Dies liegt daran, dass der Browser die Schriftart anonym abruft und daher mit diesem Attribut anonyme Anfragen gestellt werden können.

Durch die Verwendung von „link=preload“ erhöhen sich die Chancen, dass benutzerdefinierte Schriftarten heruntergeladen werden, bevor sie benötigt werden. Diese kleine Optimierung beschleunigt die Ladezeiten von Schriftarten erheblich und beschleunigt somit die Textdarstellung in Ihren Webanwendungen.

Verwenden Sie link=preconnect, um Schriftarten zu hosten

Wenn Sie gehostete Schriftarten von Websites wie Google Fonts verwenden, können Sie durch die Verwendung von link=preconnect schnellere Ladezeiten erzielen. Es weist den Browser an, vorab eine Verbindung zum Domänennamen herzustellen.

Wenn Sie die Schriftart Roboto von Google Fonts verwenden, können Sie in public/index.html Folgendes tun:

<link rel="preconnect" href="https://fonts.gstatic.com" />
...
<Link
 href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
 rel="Stilblatt"
/>

Dadurch wird die erste Verbindung zum Ursprung https://fonts.gstatic.com hergestellt, und wenn der Browser eine Ressource vom Ursprung abrufen muss, ist die Verbindung bereits hergestellt. Der Unterschied zwischen den beiden ist in der folgenden Abbildung zu sehen.

Beim Laden von Schriftarten ohne Link=Preconnect können Sie die zum Verbinden benötigte Zeit sehen (DNS-Suche, erste Verbindung, SSL usw.). Bei einer solchen Verwendung von link=preconnect sehen die Ergebnisse ganz anders aus.

Hier werden Sie feststellen, dass die für die DNS-Suche, die erste Verbindung und SSL benötigte Zeit nicht mehr benötigt wird, da die Verbindung bereits hergestellt wurde.

Verwenden von Service Workern zum Zwischenspeichern von Schriftarten

Schriftarten sind statische Ressourcen, die sich nicht oft ändern und sich daher gut für die Zwischenspeicherung eignen. Idealerweise sollte Ihr Webserver einen längeren Max-Age-Expires-Header für Schriftarten festlegen, damit Browser die Schriftarten länger zwischenspeichern. Wenn Sie eine progressive Web-App (PWA) erstellen, können Sie Service Worker verwenden, um Schriftarten zwischenzuspeichern und sie direkt aus dem Cache bereitzustellen.

Um mit dem Erstellen einer PWA mit Vue zu beginnen, generieren Sie mit dem Tool vue-cli ein neues Projekt:

vue erstellt PWA-App

Wählen Sie die Option „Features manuell auswählen“ und wählen Sie dann „Progressive Web App (PWA)-Unterstützung“ aus:

Dies sind die einzigen Dinge, die wir zum Generieren der PWA-Vorlage benötigen. Sobald dies abgeschlossen ist, können Sie das Verzeichnis zum PWA-App-Verzeichnis ändern und die App bereitstellen.

CD PWA-App
Garn servieren

Sie werden feststellen, dass sich im Verzeichnis src eine Datei registerServiceWorker befindet, die die Standardkonfiguration enthält. Erstellen Sie im Stammverzeichnis Ihres Projekts vue.config.js, falls es noch nicht vorhanden ist. Wenn ja, fügen Sie den folgenden Inhalt hinzu:

// vue.config.js
modul.exporte = {
 pwa:
 Arbeitsboxoptionen: {
 skipWaiting: wahr,
 clientsClaim: wahr,
 },
 },
};

Das Vue-CLI-Tool verwendet das PWA-Plugin, um einen Service Worker zu generieren. Im Hintergrund wird Workbox verwendet, um den Service Worker und die von ihm gesteuerten Elemente, die zu verwendende Caching-Strategie und andere erforderliche Konfigurationen zu konfigurieren.

Im obigen Codeausschnitt stellen wir sicher, dass unsere Anwendung immer von der neuesten Version des Service Workers gesteuert wird. Dies ist erforderlich, da dadurch sichergestellt wird, dass unseren Benutzern immer die neueste Version der Anwendung angezeigt wird. Sie können sich die Workbox-Konfigurationsdokumentation ansehen, um mehr Kontrolle über das generierte Service Worker-Verhalten zu erhalten.

Als Nächstes fügen wir unsere benutzerdefinierte Schriftart zum öffentlichen Verzeichnis hinzu. Bei mir ist folgender Aufbau:

Wurzel/
 öffentlich/
 Hauptseite
 Schriftarten/
 Roboter/
 Roboto-Regular.woff
 Roboto-Regular.woff2

Wenn Sie mit der Entwicklung Ihrer Vue-Anwendung fertig sind, können Sie sie erstellen, indem Sie den folgenden Befehl von Ihrem Terminal aus ausführen:

Garnaufbau

Dadurch werden die Ergebnisse in den Ordner „dist“ ausgegeben. Wenn Sie den Inhalt des Ordners überprüfen, werden Sie eine Datei bemerken, die etwa so aussieht: precache-manifest.1234567890.js. Es enthält die Liste der zwischenzuspeichernden Assets. Dabei handelt es sich lediglich um eine Liste von Schlüssel-Wert-Paaren mit Revisionen und URLs.

self.__precacheManifest = (self.__precacheManifest || []).concat([
 {
 "Revision": "3628b4ee5b153071e725",
 "URL": "/fonts/Roboto/Roboto-Regular.woff2"
 },
 ...
]);

Alles im Ordner „public/“ wird standardmäßig zwischengespeichert, einschließlich benutzerdefinierter Schriftarten. Wenn dies vorhanden ist, können Sie Ihre Anwendung mithilfe von Paketen wie „Service“ bereitstellen oder den „Dist“-Ordner auf einem Webserver hosten, um die Ergebnisse anzuzeigen. Unten finden Sie einen Screenshot der Anwendung.

Bei nachfolgenden Besuchen werden die Schriftarten aus dem Cache geladen, was die Ladezeiten der Anwendung beschleunigt.

abschließend

In diesem Beitrag haben wir uns einige Best Practices angesehen, die Sie beim Laden von Schriftarten in Ihren Vue-Anwendungen anwenden können. Durch die Verwendung dieser Vorgehensweisen stellen Sie sicher, dass die von Ihnen bereitgestellten Schriftarten gut aussehen, ohne die Leistung Ihrer App zu beeinträchtigen.

Dies ist das Ende dieses Artikels über die korrekte Art und Weise, Schriftarten in Vue.js zu laden. Weitere relevante Inhalte zum Laden von Schriftarten in Vue.js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!