gatsby omni font loader Download - gatsby omni font loader Quellcode Download

gatsby omni font loader

Schriftarten herunterladen

v2.0.2

Herunterladen

Gatsby Omni Schriftlast v2

Einfache Möglichkeit zum Hinzufügen von Webfonts oder benutzerdefinierten Schriftarten zu Gatsby Project
Performantes asynchrone Schriftladung kann aktiviert werden
Das Schreiben des Schrifters kann aktiviert werden
FOUT -HABE -HABLE -HABE VON GEFAUTEN SCHLEIBUNG

Merkmale

Unterstützt Web-Schriftarten und selbst gehostete Schriftarten
Vorladet die Dateien und Vorverschlossenung in die URL
Lädt Schriftarten asynchron, um das Blockieren von Rendern zu vermeiden
Implementiert mit schnellen Ladeausschnitten
Ladestatus -Hörer zum Vermeiden von Fout
Kleine Größe und minimale Fußabdruck

Installieren

npm install gatsby-omni-font-loader react-helmet

oder

yarn add gatsby-omni-font-loader react-helmet

Konfiguration

Fügen Sie das folgende Snippet zu gatsby-config.js Plugins-Array hinzu.

 {
  /* Include plugin */
  resolve : "gatsby-omni-font-loader" ,

  /* Plugin options */
  options : {

    /* Font loading mode */
    mode : "async" ,

    /* Enable font loading listener to handle FOUT */
    enableListener : true ,

    /* Preconnect URL-s. This example is for Google Fonts */
    preconnect : [ "https://fonts.gstatic.com" ] ,

    /* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
    custom : [
      {
        /* Exact name of the font as defied in @font-face CSS rule */
        name : [ "Font Awesome 5 Brands" , "Font Awesome 5 Free" ] ,
        /* Path to the font CSS file inside the "static" folder with @font-face definition */
        file : "/fonts/fontAwesome/css/all.min.css" ,
      } ,
    ] ,

    /* Web fonts. File link should point to font CSS file. */
    web : [ {
        /* Exact name of the font as defied in @font-face CSS rule */
        name : "Staatliches" ,
        /* URL to the font CSS file with @font-face definition */
        file : "https://fonts.googleapis.com/css2?family=Staatliches" ,
      } ,
    ] ,
  } ,
}

Optionen

Option	Beschreibung	Standard
Modus	Kann auf `async` (Standard) oder `render-blocking` eingestellt werden. Im `async` Modus werden Schriftarten optimal geladen, Fout ist jedoch sichtbar. Im `render-blocking` -Modus wird Fout in seltenen Fällen erfolgen, aber die Schriftart Dateien werden rendernblockieren.	asynchron
Umfang	Kann auf `body` (Standard) oder `html` eingestellt werden. Legt das Zielelement fest, auf das die HTML -Klassennamen angewendet werden sollen.	Körper
EnableListener	Funktioniert im `async` Modus. Aktivieren Sie die Schriftart zum Laden des Hörers, um den Blitz von nicht geklärtem Text zu handhaben. Wenn dies aktiviert ist, werden CSS -Klassen auf HTML angewendet, sobald jede Schriftart das Laden abgeschlossen ist.	FALSCH
Intervall (nur v1)	Funktioniert, wenn `enableListener` `true` ist. Schriftartintervall (in MS). Standard ist 300 ms. Empfohlen:> = 300 ms.	300
Zeitüberschreitung (nur v1)	Funktioniert, wenn `enableListener` `true` ist. Timeout -Wert von Schriftart -Hörer (in MS). Die Standardeinstellung beträgt 30S (30000 ms). Der Hörer prüft nach dem Zeitpunkt nicht mehr auf geladene Schriftarten. Schriftarten werden weiterhin geladen und angezeigt, ohne Fout zu behandeln.	30000
Brauch	Selbst gehostete Schriftartenkonfiguration. Fügen Sie den `static` Ordner Schriftdateien und CSS -Dateien hinzu. Array von `{name: "Font name", file: "https://url-to-font-css.path"}` Objekte.	`[]`
Netz	Web -Schriftarten Konfiguration. Der Dateilink sollte auf eine CSS -Datei mit der Schriftart verweisen. Array von `{name: "Font name", file: "https://url-to-font-css.path"}` Objekte.	`[]`
Vorvereinbarung	URLs, die für Preconnect -Meta verwendet werden. Basis -URL, bei der Schriftdateien gehostet werden.	`[]`
Vorspannung	Zusätzliche URLs, die für Vorspannungsmeta verwendet werden. Vorspannung für URLs, die unter `file` von `custom` und `web` -Schriftarten bereitgestellt werden, werden automatisch generiert.	`[]`

Async-Modus gegen Render-Blocking-Modus

Asynchrischer Modus

Laden Sie die Schriftstile und Dateien im Modus mit niedriger Priorität. Wenn Sie auf Performanten Schriftarten hinzufügen möchten, Fout selbst bewältigen und sicherstellen, dass die Rendernzeiten der Seite niedrig sind, sollten Sie async Modus verwenden.

Vorteile: Leistung, Inhalte werden angezeigt, bevor Schriftdateien heruntergeladen und analysiert werden
Nachteile: Fout muss behandelt werden

Render-Blocking-Modus

Laden Sie die Schriftstile und Dateien im hohen Prioritätsmodus. Wenn Sie dieses Plugin als einfache Möglichkeit verwenden möchten, Ihr Projekt wie in jedem anderen Projekt Schriftarten zu fügen, ohne dass Leistungsoptimierungen und Fout-Handhabungen zu tun haben, sollten Sie render-blocking -Modus verwenden.

Profis: Einfaches Markup, Fout tritt in den meisten Fällen nicht auf
Nachteile: Schriftart -Stylesheets und Schriftdateien können die erste Inhaltsfarbe verzögern

Umgang mit Fout mit der Schriftlade -Hörer

Beim asynchronen Laden von Schriftarten kann der Flash of Unstyled Text (FOUT) stattfinden, da Schriftarten einige Momente später laden, nachdem die Seite dem Benutzer angezeigt wurde.

Um dies zu vermeiden, können wir CSS verwenden, um die Fallback -Schriftart zu stylen, um die Schriftgröße, Linienhöhe und Buchstabenabstand der geladenen Hauptschrift zu entsprechen.

Wenn enableListener: true in Plugin-Konfiguration in gatsby-config.js festgelegt wird, werden HTML-Klassen zu <body> Element hinzugefügt, wenn die Schriftarten geladen werden.

Das HTML-Klasse-Name-Format befindet sich im folgenden Format wf-[font-family-name] . Wenn alle Schriftarten geladen werden, wird wf-all angewendet.

Sie können den Schriftstil -Spieler mit Schriftstil verwenden, um die perfekte Fallback- und Fallback -CSS -Konfiguration anzupassen.

Hier ist das Beispiel, wie body aussehen wird, nachdem alle Schriftarten geladen werden (abhängig von der Konfiguration).

 < body
  class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body >

V2 Breaking Änderungen

Entfernte interval und timeout
Änderung der Klassennamenformat in ein generischeres wf-[font-family-name] um zu vermeiden, dass Benennungskonventionen gemischt werden