non.geist

비 지학

Nonxt.js 프로젝트에 Vercel의 서체 인 Geist－ Sans & Mono ( v 1.4 )를 사용하는 패키지.

그 이유

React 프로젝트에서 GEIST를 사용하려고했는데 오류가 발생했습니다 ( 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;

서체 스타일 세트를 탐색하려면 CSS의 font-feature-settings 속성을 사용하십시오.

특허

특허

크레딧

Vercel 감사합니다

---

개발

종속성을 설치하려면 :

bun install

실행 :

 cd ./scripts
bun run index.ts

이 프로젝트는 Bun V1.0.3에서 bun init 사용하여 만들어졌습니다. Bun은 빠른 올인원 JavaScript 런타임입니다.