non.geist

non.geist

Paket untuk menggunakan tipografi Vercel, geist－ sans & mono ( v 1.4 ), untuk proyek non-next.js.

Mengapa

Saya mencoba menggunakan Geist dalam proyek React, itu salah (tergantung pada next/font ). Saya suka fleksibilitas yang ditawarkan paket － Tidak harus mengelola aset (atau dependensi); Saya mengambil banyak dev yang lebih suka ini, mungkin.
Sekarang, itu bahkan tidak merepotkan ke @font-face font (atau jenis huruf), bahkan lebih mudah dengan font variabel. Apapun, itu adalah (paket) yang solid yang solid.

Instalasi

npm i non.geist

yarn add non.geist

pnpm i non.geist

bun add non.geist

Penggunaan

Impor default menyediakan font variabel .

Di entri Anda .js (x) atau .ts (x) file, Anda dapat mengimpor seperti itu:

 import 'non.geist'

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

Kemudian,

 body {
  font-family : 'Geist Variable' ;

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

atau melakukannya di CSS secara langsung

 @import url ( 'non.geist' );

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

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

Font variabel sepanjang jalan, tetapi jika Anda membutuhkan geist sans bobot individu:

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 '

Untuk 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 '

Nilai font-family untuk bobot individu:

 @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' ;

Aneka ragam

Aturan tambahan @font-face :

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

Untuk menjelajahi set gaya Typefaces, gunakan properti font-feature-settings CSS.

Lisensi

Lisensi

Kredit

Terima kasih Vercel

---

Perkembangan

Untuk menginstal dependensi:

bun install

Untuk menjalankan:

 cd ./scripts
bun run index.ts

Proyek ini dibuat menggunakan bun init di Bun V1.0.3. Bun adalah runtime JavaScript all-in-one yang cepat.