non.geist

non.geist

حزمة لاستخدام محارف Vercel ، Geist－ sans & mono ( v 1.4 ) ، لمشاريع غير next.js.

لماذا

حاولت استخدام Geist في مشروع React ، فقد أخطأ (يعتمد على next/font ). أحب المرونة التي توفرها الحزمة － عدم الاضطرار إلى إدارة الأصول (أو التبعيات) ؛ أنا أعتبر الكثير من devs يفضل هذا ، ربما.
الآن ، ليس حتى متاعب @font-face a font (أو محرف) ، إنه أسهل مع الخطوط المتغيرة. بغض النظر ، فإنه من اللطيف (الحزمة).

تثبيت

npm i non.geist

yarn add non.geist

pnpm i non.geist

bun add non.geist

الاستخدام

يوفر الاستيراد الافتراضي خطوط متغيرة .

في ملف إدخالك .js (x) أو .ts (x) ، يمكنك استيراد مثل ذلك:

 import 'non.geist'

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

ثم،

 body {
  font-family : 'Geist Variable' ;

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

أو قم بذلك في CSS مباشرة

 @import url ( 'non.geist' );

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

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

الخطوط المتغيرة على طول الطريق ، ولكن إذا كنت بحاجة إلى الأوزان الفردية Geist:

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 '

لجيست مونو:

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 للأوزان الفردية:

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

متنوع

قواعد إضافية @font-face :

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

لاستكشاف مجموعات المحارف الأسلوبية ، استخدم خاصية font-feature-settings الخاصة بـ CSS.

رخصة

رخصة

الاعتمادات

شكرا لك فيل

---

تطوير

لتثبيت التبعيات:

bun install

لتشغيل:

 cd ./scripts
bun run index.ts

تم إنشاء هذا المشروع باستخدام bun init في BUN V1.0.3. BUN هو وقت تشغيل JavaScript سريع الكل في واحد.