google font splitter

Google-font-Splitter

Ein Tool zum Herunterladen der von Google-font bereitgestellten Online-Schriftdateien auf Ihre lokale Website.

Die von Google-font bereitgestellten Online-Schriftarten verwenden unicode-range für die Segmentierung von Schriftarten, die die Ladegeschwindigkeit von Schriftarten effektiv verbessern können.

Aufgrund von Netzwerk, Umgebung und anderen Problemen können einige Projekte jedoch nicht auf Google -Schriftarten hinweisen. Daher lädt dieses Tool das angegebene Google online auf lokal herunter, um das Projekt direkt lokal zu verweisen.

Installieren

Anforderungen: node 12+

npm install -g google-font-splitter

Wie man benutzt

Die Verwendung dieses Tools ist in zwei Schritte unterteilt, wobei Online -Schriftlinks erhalten und Schriftdateien heruntergeladen werden.

Schritt 1: Holen Sie sich Online -Schriftlinks

Öffnen Sie Google -Schriftarten und suchen Sie, um die Schriftart auszuwählen, die Sie herunterladen möchten.

Scrollen Sie nach unten auf die Seite Schriftart Details, um Stile zu finden, und klicken Sie rechts neben der Schriftart, die Sie verwenden möchten, auf die Schaltfläche "diesen Stil" .

Suchen Sie den Online -Schriftlink unterhalb des ausgewählten Familienfelds rechts und kopieren Sie ihn aus (nur einen Link, nicht das gesamte Line -Link -Tag):

Schritt 2: Laden Sie die Schriftdatei herunter

Suchen Sie einen leeren Ordner und führen Sie den folgenden Befehl aus:

google-font-splitter " https://你复制出的在线字体链接"
# 例如 google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap"

Nach der Eingabe wird das Tool die folgende Ausgabe ausdrucken:

 downloading entry css file...
recast entry file and generating font download tasks...
save entry css file...
downloading font source ======================================== 100% 291/291
download complate, save to D:projectgoogle-font-splitterfont-resultnoto-sans-sc

Anschließend finden Sie den heruntergeladenen Schriftbild im Ordner in der letzten Zeile des Protokolls. Das Verzeichnis lautet wie folgt:

 noto-sans-sc
├── s/notosanssc/xxx/...
└── noto-sans-sc.css

Enthält einen Ordner, in dem Split -Schriftart -Dateien und eine CSS -Datei mit demselben Namen wie im Verzeichnis gespeichert sind. Diese CSS -Datei ist die Eintragsdatei. Kopieren Sie den Ordner einfach in Ihr Projekt und verweisen Sie mit dem <Link /> -Tag.

Befehlszeilenparameter und Konfigurationselemente

Sie können den Parameter --help verwenden, um Hilfeinformationen jederzeit anzuzeigen.

• Parameter url

  Das Tool akzeptiert nur einen Parameter, d. H. Der Online -Schriftart von Google -Schriftarten, sicher, dass der Link auf eine CSS -Datei zeigt.

• Konfigurationselement -r, --root <path>

  In der CSS-Datei der Schriftart der Schriftart stellt das Pfadpräfix der Schriftkursdatei ein, die sich auf den relativen Pfad auf gleicher Ebene standardmäßig befindet ( also müssen Sie standardmäßig die Eintrags-CSS- und Schriftstellungs-Quelldateien in gleicher Ebene einsetzen ).

  Sie können diesen Parameter verwenden, um den Speicherort der Schriftstellungsquellendatei anzugeben. Speichern Sie beispielsweise Schriftarten in einem separaten CDN -Netzwerk:

   google-font-splitter "https://fonts.googleapis.com/..." -r https://your-custom-cdn/public/fonts/
  

• Konfigurationselement -d, --dist <savePath>

  Der Standardpunkt, an dem die Schriftart Datei heruntergeladen werden soll, ist ./font-result .

• Konfigurationselement -n, --name <fileName>

  Der Name der Schriftarteintragsdatei, dh der Name des Ordners im Download -Verzeichnis und der Name der Inneneintragsdatei darin.

  Standardmäßig wird es aus dem bereitgestellten Google -Schriftarten -Link analysiert, und der aktuelle Millisekunden -Zeitstempel wird verwendet, wenn die Auflösung fehlschlägt.

• Konfigurationselement -c, --concurrent <number>

  Die Anzahl der Parallelität beim Herunterladen von Split -Font -Quelldateien ist standardmäßig auf 30.

Zitat in einem Projekt

Die Verwendung von Verwendung ist sehr einfach. Sie müssen nur <link href="xxx.css" rel="stylesheet"> verwenden, um die heruntergeladene Schriftart -Eintragsdatei vorzustellen.

Hier sind einige allgemeine Framework-Referenzen (vorausgesetzt, die heruntergeladenen Schriftdateien werden im Noto-Sans-SC-Ordner gespeichert und die Eintragsdatei ist noto-sans-sc/noto-sans-sc.css ):

VUE2 (VUE-CLI)

Kopieren Sie den heruntergeladenen Schriftfeld in /public des VUE2 -Projekts.

Weitere Informationen finden Sie in /public/index.html :

 < link href =" <%= BASE_URL %>noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Stellen Sie dann die Schriftfamilie ein, wo Sie sie brauchen:

 # app {
  font-family : 'Noto Sans SC' , sans-serif;
}

VUE3 (vite)

Kopieren Sie den heruntergeladenen Schriftartenordner in /public des Vite -Projekts.

Weitere Informationen finden Sie in der Schriftarteintragsdatei in /index.html :

 <!-- 注意 vite 项目直接从根目录引用 public 中的文件即可 -->
< link href =" /noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Stellen Sie schließlich die Schriftfamilie bei Bedarf ein.

reagieren (erstellen reag-app)

Kopieren Sie zuerst den heruntergeladenen Schriftbild in /public des React -Projekts.

Anschließend finden Sie in der Schriftart der Schriftart in /public/index.html :

 < link href =" %PUBLIC_URL%/noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Stellen Sie schließlich die Schriftfamilie bei Bedarf ein.

Lizenz

Weitere Informationen finden Sie unter Google-FONT-Lizenz.

beziehen sich auf

Dieses Tool verwendet die folgende Abhängigkeitsentwicklung: FS-Extra-Kreideknoten-Fetch-CSS-Tree.