non.geist

non.geist

Ein Paket zur Verwendung von Vercels Schriften Geist－ Sans & Mono ( V 1.4 ) für nicht-next.js-Projekte.

Das Warum

Ich habe versucht, Geist in einem React -Projekt zu verwenden, es hat sich fehlerhaft (es hängt von next/font ab). Ich mag die Flexibilität, die ein Paket anbietet. Sie müssen keine Vermögenswerte (oder Abhängigkeiten) verwalten. Ich nehme an, dass viele Entwickler das vielleicht bevorzugen.
Jetzt ist es nicht einmal ein Problem bei @font-face eine Schriftart (oder Schrift), es ist mit variablen Schriftarten noch einfacher. Unabhängig davon ist es ein solides Nizza (Paket).

Installation

npm i non.geist

yarn add non.geist

pnpm i non.geist

bun add non.geist

Verwendung

Der Standardimport bietet variable Schriftarten .

In Ihrem Eintrag .js (x) oder .ts (x) -Datei können Sie so importieren:

 import 'non.geist'

// For Geist Mono
import 'non.geist/mono'

Dann,

 body {
  font-family : 'Geist Variable' ;

  /* For Geist Mono */
  font-family : 'Geist Mono Variable' ;
}

oder tun Sie es direkt in CSS

 @import url ( 'non.geist' );

body {
  font-family : 'Geist Variable' ;
}
/* For Geist Mono */

@import url ( 'non.geist/mono' );
font-family : 'Geist Mono Variable' ;

Variable Schriftarten den ganzen Weg, aber wenn Sie Geist -Sans -individuelle Gewichte benötigen:

import ' non.geist/font-faces/Geist-Black.css '
import ' non.geist/font-faces/Geist-Bold.css '
import ' non.geist/font-faces/Geist-Light.css '
import ' non.geist/font-faces/Geist-Medium.css '
import ' non.geist/font-faces/Geist-Regular.css '
import ' non.geist/font-faces/Geist-SemiBold.css '
import ' non.geist/font-faces/Geist-Thin.css '
import ' non.geist/font-faces/Geist-UltraBlack.css '
import ' non.geist/font-faces/Geist-UltraLight.css '

Für Geist Mono:

import ' non.geist/font-faces/GeistMono-Black.css '
import ' non.geist/font-faces/GeistMono-Bold.css '
import ' non.geist/font-faces/GeistMono-Light.css '
import ' non.geist/font-faces/GeistMono-Medium.css '
import ' non.geist/font-faces/GeistMono-Regular.css '
import ' non.geist/font-faces/GeistMono-SemiBold.css '
import ' non.geist/font-faces/GeistMono-Thin.css '
import ' non.geist/font-faces/GeistMono-UltraBlack.css '
import ' non.geist/font-faces/Geist-MonoUltraLight.css '

font-family für einzelne Gewichte:

 @import url ( 'non.geist/font-faces/Geist-Bold.css' );

font-family : 'Geist-Bold' ;
/* Geist Mono */
@import url ( 'non.geist/font-faces/GeistMono-Bold.css' );

font-family : 'GeistMono-Bold' ;

Verschiedenes

Zusätzliche @font-face -Regeln:

 font-display : swap;
font-synthesis : none;

Verwenden Sie die STSS-STS-Sets von CSS font-feature-settings , um die Schriftzeichen zu untersuchen.

Lizenz

Lizenz

Credits

Danke Vercel

---

Entwicklung

Abhängigkeiten installieren:

bun install

Zu laufen:

 cd ./scripts
bun run index.ts

Dieses Projekt wurde mit bun init in Bun v1.0.3 erstellt. Bun ist eine schnelle All-in-One-JavaScript-Laufzeit.