react fontpicker

React-Fontpicker

Eine Google-Schriftauswahlkomponente für React.

• Keine Abhängigkeiten (außer React)
• Kein Google API-Schlüssel erforderlich
• Über 1600 Google-Schriftarten, anpassbar
• Schnelle, hochwertige Schriftartenvorschau aus vorgenerierten SVG-Bildern
• Optional werden Schriftarten automatisch geladen

Gegabelt von https://github.com/Mikk3lRo/vue-fontpicker/

Dokumentation

Eine Live-Demo inklusive Nutzung finden Sie unter: https://ae9is.github.io/react-fontpicker/

Installieren

 # npm
npm i react-fontpicker-ts
# yarn
yarn add react-fontpicker-ts

# much smaller package with fewer fonts
npm i react-fontpicker-ts-lite

Importieren Sie dann die Komponente und das Stylesheet:

 import FontPicker from 'react-fontpicker-ts'
import 'react-fontpicker-ts/dist/index.css' 

Styling

Siehe CSS-Klassennamen in: packets/fontpicker/src/components/FontPicker.css

Ein Beispiel für die Neugestaltung der Schriftartenauswahl

Ein Beispiel für die Integration der Schriftartenauswahl in eine tatsächliche App: ae9is/uimix

Projektstruktur

Das Font-Picker-Projekt befindet sich in diesem Turborepo-Monorepo unter packets/fontpicker/

Bei der Live-Demo handelt es sich um eine Vite-App, die Sie selbst über npm run dev ausführen können und die auf /docs erstellt wird. Verwendet tsconfig.json .

Die Schriftartauswahlkomponente selbst erstellt über tsup (d. h. esbuild ) nach /dist mit Typdefinitionen, die über tsc gemäß tsconfig.types.json generiert wurden.

Das Skript zur Generierung der Schriftartenvorschau lädt Schriftartendateien nach /font-cache herunter und erstellt Schriftartenbildvorschauen nach /font-preview .

Leistung

Die Schriftartenauswahl-Vorschau funktioniert durch das Laden von Schriftartenvorschau-Bilddateien in CSS. Für eine schnellere Erstvorschau werden die Schriftarten auf mehrere Bilddateien aufgeteilt.

Sobald die Dropdown-Auswahl geöffnet ist, werden alle Vorschaubilddateien abgerufen, was ein reibungsloses Scrollen und Suchen ermöglicht.

Es werden keine Anfragen an die Google-Schriftarten-API gestellt, es sei denn, die Schriftartenauswahl ist auf „Autoload“ eingestellt. In diesem Fall wird die aktuell ausgewählte Schriftart an den Seitenkopf angehängt. (Der zuvor ausgewählte Schriftart-Link wird nicht entfernt.)

Zum Beispiel:

 < head >
  ...
  < link
    rel =" stylesheet "
    id =" google-font-rock_salt-all "
    href =" https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400&amp;display=swap "
  />
</ head >

Der große Nachteil dieses Ansatzes besteht darin, dass das Paket der Komponente aufgrund aller Schriftartenbildvorschauen ziemlich groß ist: 8 MB in komprimierten SVG-Bildern für 1633 Schriftarten. Stellen Sie sicher, dass Sie komprimierte SVGs bereitstellen! Hier finden Sie ein Beispiel für Vite.

Wenn Sie nach einer leichteren Option suchen, können Sie stattdessen react-fontpicker-ts-lite verwenden, das etwa 180 KB groß ist.

Eine andere Schriftartenauswahl nach einem On-Demand-Ansatz finden Sie unter: https://github.com/samuelmeuli/font-picker-react

font-picker-react erfordert einen Google-API-Schlüssel und funktioniert am besten mit der Standardschriftartbeschränkung von 50 (Schriftarten zur Auswahl).

Schriftartenvorschauen erstellen

Hinweis: Die meisten Benutzer sollten die Schriftartenvorschauen nicht neu erstellen müssen. Dieser Abschnitt ist jedoch der Einfachheit halber enthalten, wenn Sie die neuesten Schriftarten abrufen oder die Vorschauen bearbeiten müssen.

1. Google API-Schlüssel

Holen Sie sich hier einen Google API-Schlüssel https://developers.google.com/fonts/docs/developer_api#APIKey und erstellen Sie eine neue Datei namens GOOGLE_API_KEY in react-fontpicker/packages/fontpicker/scripts im selben Verzeichnis wie scripts/buildFontPreviews.ts Skript.

2. Schriftvorschau-Skript

Alle Google-Schriftarten

Zum Generieren von Schriftartenvorschauen für alle derzeit verfügbaren Google-Schriftarten (nur lateinische Schriftfamilien, außer Kumar One ).

 cd react-fontpicker/packages/fontpicker
npm run build-font-previews

Hinweis: Planen Sie für 1600 Schriftarten 20–30 Minuten und 800 MB ein, um alle Schriftarten herunterzuladen. Das Zusammenstellen der Bildvorschauen selbst sollte weniger als eine Minute dauern. Bei der erneuten Ausführung ruft das Skript nur dann neue Schriftarteninformationen ab, wenn diese älter als eine Woche sind, und überspringt das Herunterladen zwischengespeicherter Schriftarten.

Benutzerdefinierte Schriftarten

Um eine Schriftartenvorschau für benutzerdefinierte Schriftarten zu erstellen, benötigen Sie einige Informationen zu den Schriftarten und Pfaden zu der im TTF-Format heruntergeladenen Schriftartendatei.

buildFontPreviews.ts output-dir " font-name|font-category|font-variants-info|font-file " " font-name-2... "

Dabei ist „font-variants-info“ ein Array von Werten wie 0,400 und 1,700, verbunden durch +. Der erste Wert bezeichnet eine normale (0) oder kursive (1) Schriftart. Der zweite Wert ist die Schriftstärke (z. B. 100 = dünn, 400 = normal, 700 = fett, 900 = schwer).

Zum Beispiel:

buildFontPreviews.ts output-dir " FontName|sans-serif|0,400+0,700+1,400+1,700|/path/to/font.ttf " " Font2|serif|0,400|/path/to/font2.ttf "

Weitere Informationen finden Sie im Ausführungsskript build-font-previews-manual unter: packets/fontpicker/package.json

Entwicklung

Installation

Dieses Monorepo verwendet Turborepo.

Testen

Die App verwendet zum Testen Vitest und Cypress. Stellen Sie sicher, dass die Voraussetzungen für Cypress auf Ihrem System eingerichtet sind.

Auf Ubuntu:

apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb