easyfonts

Einfache Schriftarten

Easy-Schriftarten bietet CSS-Klassen, die in HTML als <div classs="font-open-sans"></div> verwendet werden sollen. Dies erleichtert die Verwendung von Google -Schriftarten in Ihren Projekten. Einfache Schriftarten erleichtert die Webfonts 2 Schritt, da Sie die Lobusschritte nicht mehr jedes Mal wiederholen müssen, wenn Sie eine neue Schriftfamilie ausprobieren:

1. Es ist nicht nötig, jedes Mal neue Schriftstylesheet zu generieren, und
2. Es ist nicht erforderlich, CSS zu bearbeiten, um die Schriftart anzuwenden.

Mit einfachen Schriftarten können Sie eine einzige leichte CSS -Datei verwenden, um alle Schriftarten in Ihrem Projekt zu importieren, und machen Sie sich niemals Sorgen, dass Sie neue Schriftarten importieren.

Warum einfache Schriftarten

Easy Fonts wurde entwickelt, um die von PageCDN verwendete Host -Konsolidierungstechnik zur Beschleunigung von Websites zu nutzen. Unser ursprüngliches Ziel war es, Websites, die PageCDN für ihre Inhaltszustellung verwenden, zuzulassen, dass sie auch optional Schriftarten über denselben CDN -Host liefern, um die 2 zusätzlichen DNS -Lookups zu reduzieren, die von Google Fonts erforderlich sind. Später erwiesen sich einfache Schriftarten als sehr nützliche Bibliothek für schnelle Prototypen. Also haben wir es für alle zu Github verlegt, die daran interessiert sind, diese Bibliothek selbst zu hosten oder sie in Kombination mit fonts.google.com zu verwenden.

Mit einfachen Schriftarten

Easy Fonts bietet eine Sammlung von CSS -Klassen, mit denen Sie Websites schneller erstellen können, ohne sich Sorgen darüber zu machen, dass Sie CSS jedes Mal ändern, wenn Sie eine neue Schriftfamilie testen müssen. Verwenden Sie Easy -Schriftarten, um alle verfügbaren Schriftfamilien und relevanten CSS -Klassen zu erfahren.

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

<!-- Or load specific font files
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/roboto.css" rel="stylesheet" />
-->

< div class =" font-roboto " >
    < div class =" font-open-sans w600i " >
        Stuff here appears in Open Sans, bold and italic
    </ div >
    < div class =" w600 " >
        Stuff here appears in Roboto, bold
    </ div >
    < div >
        Stuff here appears in Roboto and uses inherited weight and style
    </ div >
</ div >

:)

Wenn Sie fonts.css verwenden, laden Browser nur die Schriftdateien herunter, die Sie tatsächlich in Ihrem HTML verwenden, und verschwenden nicht die Bandbreite des Benutzers, indem Sie alle Schriftarten laden. Die Datei fonts.css selbst ist nur 25 kb , wenn sie von Pagecdn geladen werden. PageCDN verwendet Brotli: 11 Komprimierung, um die Datei sehr fest zu komprimieren, um die Größe innerhalb akzeptabler Grenzen zu halten.

Eine Schriftart importieren

Das dist -Verzeichnis enthält CSS -Dateien für jede einzelne Schriftfamilie, auf die Sie aus Ihrem HTML verlinken können. Sie können die Bibliothek herunterladen, um mit einzelnen Schriftfamilien zu spielen oder mit CSS -Dateien direkt von CDN zu verlinken. Im Folgenden finden Sie den Link zur open sans Schriftfamilie. Für andere Schriftfamilien finden Sie hier ein praktisches Suchwerkzeug.

 < link href =" https://pagecdn.io/lib/easyfonts/open-sans.css " rel =" stylesheet " />

Alle Schriftarten importieren

Um verschiedene Schriftarten schnell zu testen, erleichtert es einfache Schriftarten, alle Schriftfamilien gleichzeitig zu importieren. Zu diesem Zweck müssen Sie dist/fonts.css -Datei oder den folgenden CDN -Link verwenden.

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

Verwendung mit Google -Schriftarten

Es ist möglich, einfache Schriftarten und Google -Schriftarten zusammen zu verwenden. Hier erfahren Sie, wie es geht.

 < link href =" https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap " rel =" stylesheet " > 
< link href =" https://pagecdn.io/lib/easyfonts/classes.css " rel =" stylesheet " />

Schriftarten dynamisch importieren

Easy Fonts bietet Schriftarten im JSON -Format für einzelne Schriftfamilien. Auf diese Weise können Sie Schnittstellen für die Schriftauswahl für Themen und Website -Bauherren erstellen. Der JSON befindet sich in dist/info -Verzeichnis. Sie können Informationen für einzelne Schriftarten laden oder eine All-Inclusive-JSON-Datei für die gesamte Schriftstelle verwenden.

Lastinformationen aller Schriftarten laden

 https://pagecdn.io/lib/easyfonts/info/fonts.json

Lastinformationen der einzelnen Schriftfamilie laden

 https://pagecdn.io/lib/easyfonts/info/open-sans.json

Lizenz

Die TTF -Schriftdateien in dist/fonts sind nicht modifizierte Kopien von TTF -Dateien in Google Fonts Github Repo, in denen Sie Lizenzinformationen lesen können. Einzelne Schriftfamilien haben ihre eigenen Lizenzdateien in dist/license . Relevante Lizenzdateien werden auch aus jeder CSS -Datei verknüpft, um die Lizenzinformationen einfach anzeigen zu können.

Die CSS- und JSON -Dateien in diesem Repository werden nur dynamisch erzeugt und unter MIT -Lizenz abgedeckt. Wenn Sie sich einer Lizenzprobleme mit einer in diesem Repo aufgeführten Schriftfamilie kennen, öffnen Sie bitte ein Problem, damit wir die Diskrepanz lösen können.