non.geist

ไม่ใช่ Geist

แพ็คเกจที่จะใช้รูปแบบของ Vercel, Geist－ Sans & Mono ( v 1.4 ) สำหรับโครงการที่ไม่ใช่ Next.js

ทำไม

ฉันพยายามใช้ Geist ในโครงการ React มันมีความผิดพลาด (ขึ้นอยู่กับ next/font ) ฉันชอบความยืดหยุ่นที่แพ็คเกจเสนอ － ไม่ต้องจัดการสินทรัพย์ (หรือการพึ่งพา); ฉันใช้มันมากนักที่ชอบสิ่งนี้บางที
ตอนนี้มันไม่ได้ยุ่งยากกับ @font-face ตัวอักษร (หรือตัวอักษร) มันง่ายยิ่งขึ้นด้วยแบบอักษรตัวแปร ไม่ว่าจะเป็นสิ่งที่ดีต่อการมี (แพ็คเกจ)

การติดตั้ง

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 Sans:

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 '

สำหรับ 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 สำหรับน้ำหนักส่วนบุคคล:

 @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

ใบอนุญาต

ใบอนุญาต

การให้เครดิต

ขอบคุณ vercel

---

การพัฒนา

เพื่อติดตั้งการพึ่งพา:

bun install

วิ่ง:

 cd ./scripts
bun run index.ts

โครงการนี้ถูกสร้างขึ้นโดยใช้ bun init ใน Bun V1.0.3 Bun เป็นรันไทม์ JavaScript ที่รวดเร็ว