non.geist

Non.Geist

vercelの書体を使用するパッケージ、geist－sans＆mono（ v 1.4 ）、非next.jsプロジェクトに。

なぜ

ReactプロジェクトでGeistを使用しようとしましたが、エラーが発生しました（ next/fontに依存します）。パッケージが提供する柔軟性が気に入っています。多分私はそれを多くの開発者がこれを好むと思います。
今では、 @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 '

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ランタイムです。