react fontpicker

Реакция-FontPicker

Компонент выбора шрифтов Google для React.

• Никаких зависимостей (кроме React)
• Ключ Google API не требуется.
• Более 1600 шрифтов Google, настраиваемых
• Быстрый и высококачественный предварительный просмотр шрифтов из предварительно созданных изображений SVG.
• Опционально автоматически загружает шрифты

Разветвлено с https://github.com/Mikk3lRo/vue-fontpicker/.

Документация

Живая демо-версия, включая использование, доступна по адресу: https://ae9is.github.io/react-fontpicker/.

Установка

 # npm
npm i react-fontpicker-ts
# yarn
yarn add react-fontpicker-ts

# much smaller package with fewer fonts
npm i react-fontpicker-ts-lite

Затем импортируйте компонент и таблицу стилей:

 import FontPicker from 'react-fontpicker-ts'
import 'react-fontpicker-ts/dist/index.css' 

Стиль

См. имена классов CSS в: packages/fontpicker/src/comComponents/FontPicker.css.

Пример изменения стиля средства выбора шрифта

Пример интеграции средства выбора шрифта в реальное приложение: ae9is/uimix.

Структура проекта

Проект выбора шрифтов находится в монорепозитории Turborepo по адресу packages/fontpicker/.

Живая демонстрация — это приложение Vite, которое вы можете запустить самостоятельно через npm run dev и которое собирается в /docs . Использует tsconfig.json .

Сам компонент выбора шрифта создается через tsup (т.е. esbuild ) в /dist с определениями типов, сгенерированными через tsc в соответствии с tsconfig.types.json .

Сценарий создания предварительного просмотра шрифта загружает файлы шрифтов в /font-cache и создает предварительный просмотр изображений шрифтов в /font-preview .

Производительность

Предварительный просмотр средства выбора шрифта работает путем загрузки файлов изображений предварительного просмотра шрифта в CSS. Шрифты разделены на множество файлов изображений для более быстрого первоначального предварительного просмотра.

После открытия раскрывающегося списка все файлы изображений предварительного просмотра извлекаются, обеспечивая плавную прокрутку и поиск.

Никакие запросы к API шрифтов Google не выполняются, если для средства выбора шрифта не установлена ​​автоматическая загрузка, и в этом случае выбранный в данный момент шрифт добавляется к заголовку страницы. (Ранее выбранная ссылка на шрифт не удаляется.)

Например:

 < head >
  ...
  < link
    rel =" stylesheet "
    id =" google-font-rock_salt-all "
    href =" https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400&amp;display=swap "
  />
</ head >

Большим недостатком этого подхода является то, что пакет компонента довольно велик из-за всех предварительных изображений шрифтов: 8 МБ в сжатых изображениях SVG для 1633 шрифтов. Убедитесь, что вы используете сжатые SVG-файлы! См. здесь пример для Vite.

Если вы ищете более легкий вариант, вы можете использовать вместо него react-fontpicker-ts-lite размер которого составляет около 180 КБ.

Или, если вы хотите использовать другой инструмент выбора шрифта по запросу, посетите: https://github.com/samuelmeuli/font-picker-react.

font-picker-react требует ключа Google API и лучше всего работает при ограничении шрифтов по умолчанию в 50 (шрифты на выбор).

Создание предварительного просмотра шрифтов

Примечание. Большинству пользователей не требуется перестраивать предварительные просмотры шрифтов, но этот раздел включен для удобства, если вам нужно получить последние версии шрифтов или отредактировать предварительные просмотры.

1. Ключ API Google

Получите ключ Google API здесь https://developers.google.com/fonts/docs/developer_api#APIKey и создайте новый файл с именем GOOGLE_API_KEY в react-fontpicker/packages/fontpicker/scripts в том же каталоге, что и scripts/buildFontPreviews.ts скрипт.

2. Скрипт предварительного просмотра шрифта

Все шрифты Google

Для создания предварительного просмотра шрифтов для всех доступных на данный момент шрифтов Google (только латинские семейства шрифтов, за исключением Kumar One ).

 cd react-fontpicker/packages/fontpicker
npm run build-font-previews

Примечание. Для 1600 шрифтов выделите 20–30 минут и 800 МБ для загрузки всех шрифтов. Компиляция самих превью изображений должна занять меньше минуты. При повторном запуске сценарий извлекает информацию о новом шрифте только в том случае, если он старше 1 недели, и пропускает загрузку кэшированных шрифтов.

Пользовательские шрифты

Чтобы создать предварительный просмотр пользовательских шрифтов, вам понадобится некоторая информация о шрифтах и ​​путях к файлу шрифта, загруженному в формате TTF.

buildFontPreviews.ts output-dir " font-name|font-category|font-variants-info|font-file " " font-name-2... "

Где font-variants-info — это массив значений, таких как 0,400 и 1700, соединенных знаком +. Первое значение обозначает обычный (0) или курсивный (1) шрифт. Второе значение — это толщина шрифта (т. е. 100 = тонкий, 400 = нормальный, 700 = жирный, 900 = толстый).

Например:

buildFontPreviews.ts output-dir " FontName|sans-serif|0,400+0,700+1,400+1,700|/path/to/font.ttf " " Font2|serif|0,400|/path/to/font2.ttf "

См. сценарий запуска build-font-previews-manual в: packages/fontpicker/package.json.

Разработка

Установка

Этот монорепо использует Turborepo.

Тестирование

Для тестирования приложение использует Vitest и Cypress. Обязательно настройте необходимые условия для Cypress в вашей системе.

В Убунту:

apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb