googleFontCrawler
1.0.0
Automatischer Web -Crawler zum Extrahieren und Vorbereiten von Google -Schriftarten für die lokale Verwendung. Dies ist wichtig aufgrund des europäischen Datenschutzgesetzes. (DSGVO) Das Herunterladen und Verknüpfen aller Schriftfilms von Hand ist ertönend. Also habe ich ein kleines Python -Skript geschrieben, um den Prozess zu automatisieren.
Wenn Sie über die URL "fonts.googleapis.com" zugreifen, wird die Datei kurz nach der Anfrage generiert. Somit wird ein Webcrawler benötigt, um zur Laufzeit auf die Schriftdaten zuzugreifen.
Starten Sie die System -CLI im Hauptordner dieses Repo und führen Sie den folgenden Befehl aus:
python getGoogleFonts.py
Suchen Sie danach den alten Google-FONT-Link. Es sollte ungefähr so aussehen:
<html>
<header>
<title>My website</title>
...
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:700,700i|Nunito+Sans:400,700,900" rel="stylesheet">
...
Geben Sie nur die URL selbst in den Python CLI PromT ein:
Please copy your Google® fonts include URL here:
https://fonts.googleapis.com/css?family=Cormorant+Garamond:700,700i|Nunito+Sans:400,700,900
Danach können Sie auf alle nessessarischen Dateien innerhalb des export zugreifen
Alle Schriftarten werden in die fonts heruntergeladen. Außerdem wird auch ein header.html wie eine font.css -Datei generiert.
Die font.css -Datei sieht ungefähr so aus:
/* CORMORANT GARAMOND | latin-ext */
/* italic-700 */
@font-face{
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 700;
src: url('../src/fonts/Cormorant-Garamond-italic-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* normal-700 */
@font-face{
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
...
Legen Sie die neu erzeugten fonts in den src -Maler Ihres Hauptprojektwurzels. Wenn Sie keinen src -Folner haben, erstellen Sie einfach einen neuen. Sie können auch die Pfade aller Schriftarten src -attributes in der font.css -Datei so gut wie die header.html -Datei anpassen.
Legen Sie die font.css -Datei in den css -Folder Ihrer Hauptprojektwurzel. Wenn Sie einen anderen Ordner Ihres Projekts verwenden möchten, passen Sie einfach den Pfad der letzten Zeile in header.html an
Kopieren Sie den Inhalt von header.html . Ihr Code sollte ungefähr so aussehen:
<html>
<header>
<title>My website</title>
...
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-italic-700-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-normal-700-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-italic-700-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-normal-700-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-400-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-700-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-900-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-400-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-700-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-900-latin.woff2" crossorigin="anonymous" />
<link rel="preload stylesheet" as="style" href="./css/font.css" />
...
Was noch implementiert
