non.geist

не.geist

Пакет для использования шрифтов Vercel, Geist－ Sans & Mono ( v 1.4 ), для проектов Nonnext.js.

Почему

Я попытался использовать Geist в проекте React, он ошибся (это зависит от 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 init в Bun V1.0.3. Булочка-это быстрое время выполнения JavaScript.