typefaces herunterladen - typefaces Quellcode Download

typefaces

Schriftarten herunterladen

1.0.0

Herunterladen

Das Schriftenprojekt ist jetzt veraltet.
@DecdiningLotus erstellte FontSource, die die gleiche Funktionalität wie Schriften bietet, jedoch mit automatisierten Veröffentlichungen und reichhaltigerer Unterstützung für das Importieren bestimmter Gewichte, Stile oder Sprachuntergruppen.
Um FONTSource zu verwenden, ersetzen Sie in Ihrem Paket.json alle Instanzen von "Schriftart- " durch "@fontsource/ ".
Wechseln Sie dann die Importe von EG "Import" -Typaface-Roboto "in" importieren "@fontSource/Roboto/latin.css '".
Schriftpakete arbeiten weiterhin unbegrenzt, sodass keine sofortigen Änderungen erforderlich sind.

Schriften

NPM-Pakete für Open-Source-Schriftzeichen-erleichtert das Selbsthost-Webfonts.

https://www.bricolage.io/typefaces-easiest-way-to- self-host-fonts/

Warum

Selbsthosting ist deutlich schneller . Das Laden einer Schrift aus Google -Schriftarten oder einem anderen gehosteten Schriftart Service fügt eine zusätzliche (blockierende) Netzwerkanforderung hinzu. Bei meinen Tests habe ich festgestellt, dass das Ersetzen von Google-Schriftarten durch eine selbst gehostete Schriftart den SpeedIndex einer Website um ~ 300 Miliskunden auf Desktop und 1+ Sekunden auf 3G verbessern kann. Das ist eine große Sache.
Ihre Schriftarten laden offline . Es ist ärgerlich, an einem Webprojekt im Zug oder Flugzeug zu arbeiten und Ihre Schnittstelle vermasselt zu sehen, da Sie nicht auf Google -Schriftarten zugreifen können. Ich erinnere mich, dass ich einmal in dieser Situation war und alles getan habe, um das Nachladen eines Projekts zu vermeiden, da ich wusste, dass ich die Schriftarten verlieren und gezwungen sein müsse, nicht mehr zu arbeiten.
Gehen Sie über Google -Schriftarten hinaus . Einige meiner Lieblings -Schriftarten sind nicht auf Google -Schriftarten wie Clear Sans, Cooper Hewitt und Aleo.
Alle Web -Abhängigkeiten (Site | App) sollten nach Möglichkeit über NPM verwaltet werden. Es ist der moderne Weg.

Was

Jedes Schriftpaket verschickt alle erforderlichen Schriftartdateien und CSS, um eine Open-Source-Schrift selbst zu veranstalten.

Alle Google -Schriftarten wurden ebenso wie eine kleine, aber wachsende Liste anderer Open -Source -Schriftarten hinzugefügt. Öffnen Sie ein Problem, wenn Sie eine Schriftart hinzugefügt haben möchten!

Wie

Könnte nicht einfacher sein. So würden Sie offene Sans hinzufügen.

 npm install --save typeface-open-sans

Dann in Ihrer App- oder Site -Eintragsdatei.

 require ( "typeface-open-sans" )

Und das war's! Du bist jetzt selbst veranstaltet offene Sans!

Es sollte <5 Minuten dauern, um Google -Schriftarten auszutauschen.

Die Schrift geht davon aus, dass Sie WebPack mit Loader -Setup zum Laden von CSS und Schriftdateien verwenden (Sie können die Schrift mit anderen Setups verwenden, aber WebPack macht die Dinge wirklich einfach). Unter der Annahme, dass Ihre Webpack -Konfiguration korrekt eingerichtet ist, benötigen Sie nur die Schrift in der Eintragsdatei für Ihr Projekt.

Viele mit Webpack erstellte Tools wie Gatsby und Create React App sind bereits so eingerichtet, dass sie mit Schriften arbeiten. Gatsby stand standardmäßig auch Ihr CSS in Ihr <head> für noch schnelleres Laden.

Wenn Sie kein Webpack oder ein äquivalentes Tool verwenden, mit dem Sie CSS benötigen, müssen Sie die Index.CSS- und Schriftdateien aus dem Paket manuell in Ihr Build -System integrieren.

Alternativen ohne Webpack

Für Ember-Benutzer gibt es ein Addon https://github.com/jeffjewiss/ember-typeface

Hinzufügen anderer Schriftarten

Der einfachste Weg, um herauszufinden, ob Ihre bevorzugte Schrift unterstützt wird, ist die Suche nach NPM oder im Verzeichnis für Pakete in diesem Repo.

Ich würde gerne jede Open -Source -Schriftart auf NPM sehen! Öffnen Sie ein Problem, wenn eine bevorzugte Schrift von Ihnen fehlt. Ich habe programmgesteuert alle Schriftarten von Google Fonts veröffentlicht und plane das Gleiche mit Schriftarten, die über ihre API auf Fontsquirrel gehostet werden.

Andere Ideen zu erkunden

Fügen Sie eine subettierte Version jeder Schrift hinzu.
Anfangs habe ich gerade Unterstützung für die lateinische Version von Schriftarten hinzugefügt. Würde gerne Ideen hören, wie man andere Sprachen unterstützt. Möglicherweise require('open-sans/greek.css') .
Schiffs -Fallback -CSS -Helfer - Es ist nicht besonders einfach, Ihr Fallback -CSS herauszufinden. Vielleicht gibt es eine Möglichkeit, dies zu automatisieren. ZB, wenn Sie eine Schrift X bei der Schriftart mit Fallback -Schrift z verwenden, finden Sie hier eine Funktion, um das Fallback -CSS zu generieren.
Entdecken Sie weitere Optimierungen, um Schriftarten zu laden. https://www.zachleat.com/web/Comprection-webfonts/ hat eine lange Liste. Die meisten erfordern schmerzhafte Projekt-Scripting. Was wäre, wenn die besten Strategien automatisiert werden könnten?

Expandieren

Zusätzliche Informationen