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屬性。

執照

執照

學分

謝謝你

---

發展

安裝依賴項：

bun install

運行：

 cd ./scripts
bun run index.ts

該項目是在BUN V1.0.3中使用bun init創建的。 BUN是一個快速的多合一JavaScript運行時。