Startseite>Ressourcen zum Erstellen von Websites>Schriftarten herunterladen
Herunterladen

? Webfont Dowload Vite Plugin ⚡

Sammelt WebFont-Links, -Orporte und Definitionen aus Ihrem vite-Projekt, lädt CSS- und Schriftartdateien (Privatsphäre) herunter , fügen Sie die Schriftarten Ihrem Bundle hinzu (oder dienen Sie über Dev Server) und injiziert Schriftdefinitionen mit einer Nicht-Render-Blockierungsmethode , in der sie in der Lage sind, bei einer Persalent-Blockierungsmethode , bei der Sie zur Verfügung stehen, für Offline- Development.


? Installieren 

npm i vite-plugin-webfont-dl -D

Inhaltsverzeichnis

  1. ? Installieren
  2. Verwendung:
    • ? Null -Konfiguration [Methode A]
    • ? Einfache Konfiguration [Methode B]
  3. Das ist alles!
    • ? Laravel
    • ? Screenshot
  4. ? Unterstützte Webfont -Anbieter
  5. Optionen
  6. ❓ Webfonts von Drittanbietern
  7. ? Wie es funktioniert
    • ? Google -Schriftarten
    • ? Webfont-DL Vite-Plugin
  8. Benchmark
  9. Ressourcen
  10. ? Lizenz

? Verwendung: Zero -Konfiguration [Methode A]

Extrahieren, Downloads und injiziert Schriftarten aus dem ursprünglichen Google -Schriftarten -Code -Snippet .

  1. Wählen Sie Ihre Schriftfamilien in Ihrem WebFont -Anbieter (z. B. Google -Schriftarten) aus und kopieren Sie den Code aus dem Block "Verwenden im Web" in <head> : 
     < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap " rel =" stylesheet " >
  2. Fügen Sie webfontDownload ohne Konfiguration zu Ihren vite -Plugins hinzu, und das Plugin wird sich automatisch um alles kümmern: 
     // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( ) ,
  ] ,
} ;
  3. Die ursprünglichen Webfont -Tags werden in dist/index.html ersetzt: 
     < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style >

? Verwendung: Einfache Konfiguration [Methode B]

Extrahiert, downloads und injiziert Schriftarten aus den konfigurierten Webfont -CSS -URLs .

  1. Wählen Sie Ihre Schriftfamilien in Ihrem WebFont -Anbieter (z. B. Google -Schriftarten) aus und kopieren Sie die CSS -URL (n) aus dem Code -Block "Verwenden im Web" : 
     < link href =" [CSS URL] " rel =" stylesheet " >
  2. Fügen Sie Ihren vite -Plugins webfontDownload mit den ausgewählten Google -Schriftarten CSS -URL (s) hinzu: 
     // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( [
      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' ,
      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'
    ] ) ,
  ] ,
} ;

Das ist alles!

Die Webfonts werden injiziert und verwendet .
Das Plugin erledigt seine Arbeit nahtlos, ob Sie am lokalen Entwicklungsserver arbeiten oder auf Produktion aufbauen. 

 h1 {
  font-family : 'Press Start 2P' , cursive;
}

h2 {
  font-family : 'Fira Code' , monospace;
}

? Laravel

Damit es mit Laravel Vite Plugin funktioniert, fügen Sie diese Zeile Ihrer Blade -Datei hinzu: 

 @vite ( ' webfonts.css ' )

? Screenshot


? Unterstützte Webfont -Anbieter

  • Google -Schriftarten : Funktioniert mit Null -Konfiguration oder einfacher Konfiguration
  • Bunny -Schriftarten : Funktioniert mit Null -Konfiguration oder einfacher Konfiguration
  • FONTSHARE : Funktioniert mit Null -Konfiguration oder einfacher Konfiguration
  • FIRA -Code , Hack -Schriftarten ( cdn.jsdelivr.net ): Funktioniert mit Null -Konfiguration oder einfacher Konfiguration
  • Inter -Schriftart ( rsms.me ): Funktioniert mit Null -Konfiguration oder einfacher Konfiguration
  • Jeder Anbieter mit CSS (mit @font-face -Definitionen) arbeitet mit einfacher Konfiguration

Optionen

  • injectAsStyleTag ( boolean , Standard: true ):
    Inject WebFonts als <style> Tag (eingebettete CSS) oder als externe .css -Datei injizieren

  • minifyCss ( boolean , Standard: Wert von build.minify ):
    Minimieren Sie den CSS -Code während des Builds.

  • embedFonts ( boolean , Standard: false ):
    Einbettete Base64-kodierte Schriftarten in CSS.
    In einigen Fällen können die Filegröße erhöht werden, wenn CSS mehrere Verweise auf die gleiche Schriftartdatei enthalten. Beispiel

  • async ( boolean , Standard: true ):
    Verhindern Sie die Verwendung von Inline -Event -Handlern ( webfonts.css ), die Probleme mit der Inhaltssicherheitsrichtlinie verursachen können.
    Funktioniert nur mit injectAsStyleTag:false .

  • cache ( boolean , Standard: true ):
    Speichern Sie persistent heruntergeladene CSS- und Schriftartdateien im lokalen Datei -Cache.
    Wenn auf false eingestellt wird, wird der vorhandene Cache gelöscht.

  • proxy ( false|AxiosProxyConfig , Standard: false ):
    Proxy -Konfiguration für Netzwerkanforderungen.

  • assetsSubfolder ( string , Standard: '' ):
    Moves heruntergeladene Schriftdateien, um den Unterordner im Verzeichnis von Assets zu trennen.

Verwendung: 

 ViteWebfontDownload (
  [ ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

oder: 

 ViteWebfontDownload (
  [
    'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap' ,
  ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

❓ Webfonts von Drittanbietern

Euen Mit der Standardmethode zum Hinzufügen von Webfonts von Drittanbietern (Google-Schriftarten, Bunny-Schriftarten oder Fontshare) einer Webseite kann die Seite erheblich verlangsamen. Lighthouse- und PageSpeed Insights nennt sie "Render-Blocking-Ressourcen" , was bedeutet, dass die Seite nicht vollständig rendern, wenn die Webfonts CSS nicht vom Remote-Server abgerufen wurden.

? Durch die Vermeidung von Renderblockingressourcen, die durch Webfonts von Drittanbietern verursacht werden, können Sie die Seitenleistung steigern , was zu einer besseren Benutzererfahrung führt und die SEO-Ergebnisse verbessert .

Das Plugin lädt die angegebenen Schriftarten vom Drittanbieter-Webfont-Dienst (wie Google-Schriftarten) herunter und injiziert sie dynamisch (als interne oder externe Stylesheet) in Ihr Vite-Projekt, wodurch die Webdefonts von Drittanbietern in selbst beherrschte Umstände verwandelt werden. ?

? Zusätzlich zu der erheblichen Leistungssteigerung profitieren Ihre Besucher auch für den Schutz des Datenschutzes , da kein Server von Drittanbietern beteiligt ist.


? Wie es funktioniert

? Google -Schriftarten

Google Fonts generiert den folgenden Code, den Sie in <head> in den Beispielen einer Website einfügen müssen: 

 < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code&display=swap " rel =" stylesheet " >

Was passiert auf clientseitig mit Google-Schriftarten :

  1. Die erste Zeile gibt dem Browser einen Hinweis, um den Verbindungshandshake (DNS, TCP, TLS) mit fonts.googleapis.com zu beginnen. Dies geschieht im Hintergrund, um die Leistung zu verbessern. [ preconnect ]
  2. Die zweite Zeile ist ein weiterer Voraussetzungshinweis auf fonts.gstatic.com . [ preconnect ]
  3. Die dritte Zeile weist den Browser an, eine CSS-Stylesheet-Datei von fonts.googleapis.com (mit font-display:swap ) zu laden und zu verwenden. [ stylesheet ]
  4. Der Browser lädt die CSS -Datei herunter und analysiert sie. Das Parsen-CSS ist eine Reihe von @font-face -Definitionen, die Schriftart-URLs von fonts.gstatic.com -Server enthalten.
  5. Der Browser lädt alle relevanten Schriftarten von fonts.gstatic.com herunter.
  6. Nach den erfolgreichen Schriften tauscht der Browser die Fallback -Schriftarten auf die heruntergeladenen.

?

? Webfont-DL Vite-Plugin

Im Gegenteil, das WebFont-DL-Plugin erledigt den größten Teil des Auftrags zum Bauzeit und hinterlässt das Minimum für den Browser.

WebFont-DL-Plugin

  • Sammelt die Webfont -CSS -URLs (aus Plugin -Konfiguration, index.html und dem generierten CSS).
  • Laden Sie die Webfont CSS -Datei (en) herunter
  • extrahiert die Schrift URLs
  • Laden Sie die Schriftarten herunter
  • Fügt die Schriftarten dem Bundle hinzu
  • generiert ein eingebettetes CSS ( <style> Tag) oder eine Webfont / externe CSS -Datei
  • Fügen Sie sie zum Bundle hinzu und fügen Sie den folgenden Code in die <head> Ihrer Website mit einer nicht renderischen Blockierungsmethode ein: Beispiel : 
 < style >
  @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  ...
</ style >

oder (mit Dev Server oder injectAsStyleTag: false Option) 

 < link rel =" preload " as =" style " href =" /assets/webfonts.b904bd45.css " >
< link rel =" stylesheet " media =" print " onload =" this.onload=null;this.removeAttribute('media'); " href =" /assets/webfonts.b904bd45.css " >

Was passiert auf clientseitig mit WebFont-DL-Plugin :

  1. Laden Sie Schriftarten aus dem eingebetteten CSS ( <style> Tag).

oder

  1. Die erste Zeile weist den Browser an, eine CSS -Datei für die spätere Verwendung als Stylesheet vorzubereiten. [ preload ]
  2. Die zweite Zeile weist den Browser an, diese CSS-Datei als " print " -Stylesheet (Nicht-Render-Blockierung) zu laden und zu verwenden. Nach dem Laden von Stylesheet " all " Media Type (durch Entfernen des " media ). [ stylesheet ]

Benchmark

Starter vite Projekt mit

▶ ️ Standard -Google -Schriftarten ? ▶ ️ Webfont dl vite Plugin
? Webfont.feat.Agency ? Webfont-dl.feat.Agency

Vergleichen


Ressourcen

  • Page -Geschwindigkeits -Checkliste / Fix und Eliminierung von Renderblockierungsressourcen

? Lizenz

MIT -Lizenz © 2022 feat.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle