Ich habe eine Vorlage, die auf eine Google-Schriftart wie folgt verweist:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
Wie kann ich es herunterladen und einrichten, damit es in meinen Seiten verwendet werden kann, die ständig offline sind?
Gehen Sie einfach zu Google Fonts - http://www.google.com/fonts/ , fügen Sie die gewünschte Schriftart Ihrer Sammlung hinzu und drücken Sie die Download-Taste. Und dann verwenden Sie einfach @fontface, um diese Schriftart mit Ihrer Webseite zu verbinden. Übrigens, wenn Sie den Link öffnen, den Sie verwenden, sehen Sie ein Beispiel für die Verwendung von @fontface
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300
Zum Beispiel
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
Ändern Sie einfach die URL-Adresse in den lokalen Link der Schriftdatei, die Sie heruntergeladen haben.
Sie können es noch einfacher machen.
Laden Sie einfach die Datei herunter, die Sie verlinkt haben:
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300
Nennen Sie es opensans.css oder so.
Dann ändern Sie einfach die Links in url () in Ihren Pfad zu Font-Dateien.
Und ersetzen Sie dann Ihren Beispielstring durch:
<link href='opensans.css' rel='stylesheet' type='text/css'>
Sie können alle Web-Fonts von Google herunterladen und schlägt den CSS-Code für die Implementierung vor. Mit diesem Tool können Sie einfach alle Formate auf einmal ohne Probleme herunterladen.
Wollten Sie schon immer wissen, wo Google ihre Webfonts hostet? Dieser Service kann nützlich sein, wenn Sie alle .eot-, .woff-, .woff2-, .svg- und .ttf-Dateien einer Schriftartvariante direkt von Google herunterladen möchten (normalerweise bestimmt Ihr User-Agent das beste Format).
Schauen Sie sich auch ihre Github-Seite an.
Schritt für Schritt gefunden, um dies zu erreichen (für 1 Schriftart):
(Stand vom 09.09.2013)
- Wählen Sie Ihre Schriftart unter http://www.google.com/fonts aus.
- Fügen Sie Ihrer Sammlung den gewünschten hinzu, indem Sie die blaue Schaltfläche "Zur Sammlung hinzufügen" drücken
- Klicken Sie auf die Schaltfläche "Alle Stile anzeigen" in der Nähe der Schaltfläche "Aus Sammlung entfernen", und stellen Sie sicher, dass Sie andere Stile ausgewählt haben, die Sie möglicherweise ebenfalls benötigen, z. B. "Fett".
- Klicken Sie unten rechts auf der Seite auf die Schaltfläche "Verwenden"
- Klicken Sie oben auf die Download-Schaltfläche mit einem Pfeil nach unten
- Klicken Sie in der angezeigten Popup-Meldung auf "Zip-Datei"
- Klicken Sie im Popup auf die Schaltfläche "Schließen"
- Blättern Sie langsam durch die Seite, bis Sie die 3 Registerkarten "Standrd | @import | Javascript" sehen.
- Klicken Sie auf die Registerkarte "@import"
- Wählen Sie die URL zwischen
'url('
und')'
aus und kopieren Sie sie.- Kopiere es in die Adressleiste in einen neuen Tab und gehe dorthin
- Führen Sie "Datei> Seite speichern unter ..." aus und benennen Sie sie "gewünschterFontname.css" (ersetzen Sie sie entsprechend).
- Dekomprimieren Sie die heruntergeladene .Zip-Datei für Schriftarten (.ttf sollte extrahiert werden).
- Wechseln Sie zu " http://ttf2woff.com/ " und konvertieren Sie alle von ZIP extrahierten .ttf-Dateien in .woff
- Bearbeiten Sie
desiredfontname.css
und ersetzen Sie die darin enthaltene URL [zwischen'url('
und')'
] durch die entsprechende konvertierte .woff-Datei, die Sie auf ttf2woff.com erhalten haben. Der Pfad, den Sie schreiben, sollte Ihrem Server doc_root entsprechen- Speichern Sie die Datei und verschieben Sie sie an den endgültigen Ort. Schreiben Sie den entsprechenden
<link/>
-CSS-Tag, um diese in Ihre HTML-Seite zu importieren- Verweisen Sie von nun an auf diesen Zeichensatz mit seinem
font-family
-Namen in Ihren Stilen
Das ist es. Weil ich das gleiche Problem hatte und die Lösung oben für mich nicht funktionierte.
Die anderen Antworten sind nicht falsch, aber ich habe festgestellt, dass dies der schnellste Weg ist.
Die Ergebnisse enthalten alle Schriftformate: woff, svg, ttf, eot.
UND als zusätzlichen Bonus generieren sie auch die CSS-Datei für Sie!
3 Schritte:
Ex:
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
Schauen Sie sich src: -> url an. Laden Sie http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 herunter und speichern Sie das Verzeichnis fonts. Danach ändern Sie die URL Ihrer heruntergeladenen Datei. Jetzt wird es aussehen
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
** Laden Sie alle Schriftarten herunter, die die .css-Datei Enthalten. Ich hoffe, es hilft Ihnen
In diesem praktischen Artikel erfahren Sie, wie Sie Google-Schriftarten offline verwenden
Im Wesentlichen fügen Sie die Schrift in Ihr Projekt ein.
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');
Wenn Sie Google Fonts verwenden, ist Ihr Workflow in 3 Schritte unterteilt: "Auswählen", "Anpassen", "Einbetten". Wenn Sie genau hinschauen, befindet sich am rechten Ende der Seite "Verwenden" ein kleiner Pfeil, mit dem Sie die aktuell in Ihrer Sammlung vorhandene Schriftart herunterladen können.
Danach und sobald die Schriftart auf Ihrem System installiert ist, müssen Sie sie wie jede andere normale Schriftart verwenden, die die CSS-Direktive font-family
verwendet.
Ich folgte der Antwort von duydb , um den folgenden Python-Code zu erstellen, der diesen Prozess automatisiert.
import requests
with open("example.css", "r") as f:
text = f.read()
urls = re.findall(r'(https?://[^\)]+)', text)
for url in urls:
filename = url.split("/")[-1]
r = requests.get(url)
with open("./fonts/" + filename, "wb") as f:
f.write(r.content)
text = text.replace(url, "/fonts/" + filename)
with open("example.css", "w") as f:
f.write(text)
Hoffe, das hilft bei einigen der Copy-Paste-Tode.
Wenn Sie Ihre Paketabhängigkeiten explizit deklarieren oder den Download automatisieren möchten, können Sie ein Knotenpaket hinzufügen, um die Google-Schriftarten aufzurufen und lokal zu bedienen.
Das Schriftarten-Projekt erstellt NPM-Pakete für Open Source-Schriftarten:
Jedes Paket wird mit allen erforderlichen Dateien und CSS geliefert, um eine Open-Source-Schriftart selbst zu hosten.
Alle Google-Schriftarten wurden hinzugefügt sowie eine kleine, aber wachsende Liste anderer Open-Source-Schriftarten.
Suchen Sie einfach mit npm nach typeface-<typefacename>
, um die verfügbaren Schriftarten wie typeface-roboto oder typeface-open-sans zu durchsuchen und installieren Sie sie wie folgt:
$ npm install typeface-roboto --save
$ npm install typeface-open-sans --save
$ npm install material-icons --save
Für den allgemeineren Anwendungsfall gibt es mehrere npm-Pakete, die Zeichensätze in zwei Schritten bereitstellen, indem zunächst das Paket abgerufen wird und dann auf den Namen der Schriftart und die gewünschten Optionen verwiesen wird.
Hier sind einige Optionen:
Weiterführende Literatur: