Google web fonts herunterladen

Also, ein weiterer Tipp, wenn Sie Google-Schriftarten verwenden, ist zu überprüfen, dass Sie haben, dass,dass &display=swap-Parameter zu Ihrer ladenden URL haben, und wenn nicht (wie es erst vor kurzem unterstützt wird), dann fügen Sie es hinzu: Alles in allem haben immer mehr geraten, Ihre statischen Elemente selbst zu hosten, idealerweise auf der Domain, aus der Sie die Webseiten bedienen. Schriftarten sind statische Elemente, daher sollten sie auch selbst gehostet werden? Nun, es stellt sich heraus, dass es nicht ganz so einfach ist, weil Schriftarten ihre eigenen Besonderheiten und Leistungsoptimierungen haben, die Selbsthosting ein wenig schwieriger machen könnten… Dieses Projekt enthält hauptsächlich die binären Schriftartendateien, die von Google Fonts (fonts.google.com) bereitgestellt werden, da ich tief in Schriftarten eintauchte, und da ich gewarnt habe, dass Sie zukünftige Vorteile von Google Fonts durch Selbsthosting verlieren könnten, werde ich einen kleinen Seitensprung in andere Dinge machen, die ich entdeckt habe, während ich daran arbeite. Was sind die großen bevorstehenden Veränderungen in der Schriftwelt? Nun, es gibt zwei Änderungen, die im Moment viel Aufsehen erregen und die sich auf Schriftarten in der Zukunft auswirken können (und daher von Google Fonts unterstützt werden können, vielleicht standardmäßig, wenn Sie bei ihnen geblieben sind): variable Schriftarten und progressive Schriftanreicherung. Zu guter Letzt müssen Sie nun nach diesem neuen “Font-Face” rufen. Sie können benötigt so viele CSS-Klassen hinzufügen, wie Sie benötigen. Manchmal müssen Sie Ihre Seite CSS überprüfen, um zu sehen, welche Klassen für diese Schriftarten aufrufen und sie zu dieser Liste hinzufügen. Für uns beschränken wir uns auf die Grundlagen unten. Bei näherer Betrachtung stellte ich jedoch fest, dass die Schriftarten größer waren: @font-Face – Schriftfamilie: `Lato`; Schriftart: normal; Schriftgewicht: 400; src: local(`Lato Regular`), local(`Lato-Regular`), /* aus fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2 */ url(`Lato_400.woff2`) format(`woff2`Lato_400 fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWA.woff), Siehe neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ für das Skript (ich reproduziere es hier nicht, also muss ich es nur an einem Ort aktualisieren, wenn ich es brauche).

Wenn Sie dies nur tun möchten, um das Leverage-Browser-Caching-Problem zu beheben, das mit Google Fonts kommt, können Sie alternative Schriftarten CDN verwenden und Schriftarten wie: Progressive Schriftart-Anreicherung, nimmt im Grunde die Untersetzung auf die nächste Ebene und ermöglicht das Herunterladen von zusätzlichen Zeichendefinitionen, wie sie als ein Strom von zusätzlichen Informationen benötigt werden, die die derzeit heruntergeladene Schriftart ergänzt, anstatt eine zusätzliche hinzuzufügen. Dies mag wie kleine Gewinne für eine Menge Aufwand für uns Westler erscheinen, aber für andere Sprachen – vor allem im Fernen Osten – können Schriftdateien massiv sein (wie 2Mb massiv), wenn man alle Zeichen in diesen Sprachen bedenkt. Aus diesem Grund werden Web-Schriftarten in diesen Ländern nicht so viel verwendet und progressive Schriftart-Anreicherung kann Web-Schriftarten bis zu Websites in diesen Sprachen öffnen. Der erste Unterschied ist, dass wir unser Schriftdisplay verloren haben: Swap-Zeile, so dass wir das wieder leicht genug hinzufügen können, aber interessanter ist die Tatsache, dass Google Fonts zwei Schriftarten serviert – und einen anderen Unicode-Bereich enthält. Dies ist auf font-subsetting zurückzuführen und reduziert Schriftartdateien. Der andere empfohlene Ansatz ist der selektive Download. Öffnen Sie das Google Fonts-Verzeichnis, wählen Sie Ihre bevorzugten Schriftarten (oder Schriftarten) aus und fügen Sie sie einer Sammlung hinzu. Sobald Sie die gewünschten Schriftarten gesammelt haben, klicken Sie oben auf den Link “Download your Collection” und Sie erhalten eine ZIP-Datei mit allen gewünschten Schriftarten im TTF-Format. Hier ist eine kurze Demo: Außerdem musste ich eine .htaccess-Datei zu meinem Verzeichnis hinzufügen, die die Schriftarten enthält, die Mime-Typen enthalten, um zu vermeiden, dass Fehler in Chrome Dev Tools auftauchen.

Progressive Schriftanreicherung scheint in einem viel früheren Stadium als variable Schriftarten aus meinem Verständnis zu sein, aber es gibt eine Online-Demo zur Verfügung. Sie sind jedoch eine weitere potenziell aufregende Änderung, die an Schriftarten kommt. Hier geht es nicht um einen Trick. Da alle Google-Schriftarten Open Source sind, können Sie sie kostenlos herunterladen und auf Ihrem lokalen Computer installieren.

スポンサーリンク
レクタングル大
レクタングル大
  • このエントリーをはてなブックマークに追加
スポンサーリンク
レクタングル大